Vue3父子组件间传参通信详解

在 Vue3 中，父子组件之间的通信可以使用 props 和 events 机制来实现。具体步骤如下：

1.父组件向子组件传递数据

父组件可以通过在子组件标签中使用属性绑定的方式，将数据传递给子组件。在子组件内部，可以使用 props 属性接收传递过来的数据。示例代码如下：

<template>
  <div>
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

在子组件中，需要使用 props 属性声明接收的属性名称和类型。示例代码如下：

2.子组件向父组件传递数据

子组件可以通过在自身触发事件的方式，将数据传递给父组件。在父组件中，可以使用 @eventName 的方式监听子组件触发的事件，并在事件处理函数中获取传递过来的数据。示例代码如下：

<template>
  <div>
    <ChildComponent @change-message="handleChangeMessage"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleChangeMessage(message) {
      this.message = message;
    }
  }
}
</script>

在子组件中，需要使用 $emit 方法触发事件，并将要传递的数据作为参数传入。示例代码如下：

<template>
  <div>
    <button @click="handleClick">Change Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('change-message', 'Hello, parent!');
    }
  }
}
</script>

需要注意的是，在 Vue3 中，如果子组件需要修改父组件中传递过来的属性，需要在 setup 函数中使用 emit 方法将修改后的值传递给父组件。示例代码如下：

<template>
  <div>
    <button @click="handleChangeMessage">Change Message</button>
  </div>
</template>

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

export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const newMessage = ref('');

    const handleChangeMessage = () => {
      newMessage.value = 'Hello, parent!';
      emit('update:message', newMessage.value);
    };

    return {
      newMessage,
      handleChangeMessage
    };
  }
}
</script>

在父组件中，需要使用 v-model 指令来接收子组件中修改后的属性值，并将其绑定到父组件中的属性上。示例代码如下：

<template>
  <div>
    <ChildComponent v-model:message="message"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

在子组件中，需要使用 props 属性声明接收 value 和 update:value 两个属性，并使用 v-model 指令将接收到的 value 值和 update:value 事件绑定到内部的状态上。示例代码如下：

<template>
  <div>
    <button @click="handleChangeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  props: {
    value: {
      type: String,
      required: true
    },
    'update:value': {
      type: Function,
      required: true
    }
  },
  setup(props) {
    const message = ref(props.value);

    watch(
      () => props.value,
      (newValue) => {
        message.value = newValue;
      }
    );

    const handleChangeMessage = () => {
      message.value = 'Hello, parent!';
      props['update:value'](message.value);
    };

    return {
      message,
      handleChangeMessage
    };
  }
}
</script>

以上就是在 Vue3 中实现父子组件之间传递数据的详细步骤。需要注意的是，如果需要在父组件中直接访问子组件中的状态或方法，可以使用 ref 和 teleport API 实现。具体使用方法可以参考官方文档。