vue 3 setup 父子組件傳值

在Vue 3中，可以使用props和emit來實現父子組件之間的值傳遞。

在父組件中，可以使用props屬性來定義要傳遞給子組件的值。例如：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

在子組件中，可以使用props屬性來接收父組件傳遞的值。例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

這樣，父組件就可以將值傳遞給子組件並在子組件中顯示。

如果需要在子組件中修改父組件的值，可以使用emit方法來觸發事件。例如：

在父組件中：

<template>
  <div>
    <child-component :message="parentMessage" @update-message="updateParentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    updateParentMessage(newMessage) {
      this.parentMessage = newMessage;
    }
  }
};
</script>

在子組件中：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New message from child');
    }
  }
};
</script>

這樣，子組件中的updateMessage方法將觸發update-message事件，父組件中的updateParentMessage方法將被調用，並且可以更新父組件的值。

這就是在Vue 3中實現父子組件之間值傳遞的方式。