vue3组件间通信

组件间通信

使用Props实现父组件向子组件传递参数

• 在 Vue 的组件实例化过程中，父组件和子组件之间的通信是通过组件实例之间的关联来实现的。
• 父组件通过创建子组件实例的方式来传递 Props，并且在子组件实例化过程中，确保 Props 的值被正确初始化
• Vue 在创建子组件实例时会将这些 Props 存储在子组件实例的 props 对象中,当父组件修改传递给子组件的 Props 时，Vue 会触发虚拟 DOM 的更新流程。
• 在更新过程中，Vue 会比较新旧虚拟 DOM 树的差异，并且更新真实 DOM 以反映这些变化。

<!-- ChildComponent.vue -->
<script setup>
//接收父组件传递过来的title参数
defineProps({
    title:{
        type:String,
        default:''
    }
})
</script>

<template>
  <h4>{{ title }}</h4>
</template>

<!-- ParentComponent.vue -->
<script setup>
//导入响应式数据ref，子组件ChildComponent
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
//设置响应式数据
const posts = ref([
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
])
</script>

<template>
<!--使用v-for语法遍历posts向子组件传参-->
	<ChildComponent
  	v-for="post in posts"
	  :key="post.id"
  	:title="post.title"
	></ChildComponent>
</template>

使用emits自定义事件实现子组件向父组件传递参数

<template>
  <button @click="sendDataToParent">点击发送数据到父组件</button>
</template>

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

export default defineComponent({
  methods: {
    sendDataToParent() {
      // 触发自定义事件 'send-data' 并传递数据
      this.$emit('send-data', '这是来自子组件的数据');
    }
  }
});
</script>

<template>
  <div>
    <p>从子组件接收的数据: {{ receivedData }}</p>
    <!-- 监听子组件的自定义事件 'send-data' -->
    <ChildComponent @send-data="handleDataFromChild" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    // 使用 ref 创建响应式数据
    const receivedData = ref('');

    // 处理从子组件接收的数据
    const handleDataFromChild = (data) => {
      receivedData.value = data;
    };

    return {
      receivedData,
      handleDataFromChild
    };
  }
});
</script>