vue3script setup 子传父 父传子

在 Vue 3 中，可以使用 `setup` 函数来编写组件逻辑。子组件向父组件传递数据可以通过 `emit` 方法实现，父组件向子组件传递数据可以通过 `props` 实现。

子组件向父组件传递数据的示例代码如下：

<template>
  <button @click="handleClick">点击</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['update:title'],
  setup(props, { emit }) {
    const handleClick = () => {
      emit('update:title', '新的标题');
    };

    return {
      handleClick,
    };
  },
};
</script>

在父组件中，可以通过监听子组件的 `update:title` 事件来获取子组件传递的数据：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ChildComponent @update:title="handleUpdateTitle" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      title: '原始标题',
    };
  },
  methods: {
    handleUpdateTitle(newTitle) {
      this.title = newTitle;
    },
  },
};
</script>

父组件向子组件传递数据的示例代码如下：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ChildComponent :message="message" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      title: '原始标题',
      message: '父组件传递的消息',
    };
  },
};
</script>

在子组件中，可以通过 `props` 来接收父组件传递的数据：

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>