vue3父子组件动态传值

在Vue3中，父组件向子组件传值可以使用props属性，而子组件向父组件传值可以使用自定义事件。以下是一个简单的例子：

父组件：

<template>
  <div>
    <h2>父组件</h2>
    <p>子组件传回的值：{{ message }}</p>
    <Child :init-message="initMessage" @child-message="onChildMessage" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      initMessage: 'Hello, child!',
      message: ''
    }
  },
  methods: {
    onChildMessage(msg) {
      this.message = msg
    }
  }
}
</script>

子组件：

<template>
  <div>
    <h3>子组件</h3>
    <p>父组件传来的值：{{ initMessage }}</p>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    initMessage: {
      type: String,
      required: true
    }
  },
  methods: {
    sendMessage() {
      this.$emit('child-message', 'Hello, parent!')
    }
  }
}
</script>

在父组件中，我们将子组件的初始值 `initMessage` 传递给子组件作为props属性。子组件通过 `$emit` 方法触发自定义事件，将消息发送给父组件。父组件通过 `@child-message` 监听子组件的自定义事件，并执行 `onChildMessage` 方法，将消息存储在 `message` 变量中。最后，父组件将 `message` 变量展示在页面上。