Vue.js中各种组件通信总结（父与子组件之间的通信情况）

组件通讯

在使用Vue.js的框架时，组件通信是前端开发中常见的问题。

举个输入框传递数据的例子：

分为了两个部分

• header：输入框部分。允许用户输入文本并通过点击按钮将输入的文本添加到一个列表中。
• body：列表显示功能。

以下有几种常见的组件通信方式，将输入的信息通过不同的方法进行头部和身体部分的相互通信来实现相同效果

父子通信:

props和defineProps

• 父组件通过props将数据传递给子组件。
• 子组件通过defineProps来接收父组件传递的props。

父组件包含了输入框部分(header)

<template>
    <div class="header">
      <input type="text" v-model="newMsg">
      <button @click="add">确定</button>
    </div>
    <Child :list="list"></Child>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import Child from './child.vue'
  
  const newMsg = ref('')
  const list = ref(['html', 'css'])
  
  const add = () => {
    list.value.push(newMsg.value)
  }
  </script>

子组件为列表显示部分，接收父组件的list数据，接着生成列表再传递给父组件进行显示

<template>
    <div class="body">
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
</template>


<script setup>
defineProps({
    list: {
      type: Array,
      default: () => []
    }
})
</script>

生命周期函数onBeforeUpdate

父组件为输入框部分(header)

<template>
    <div class="header">
      <input type="text" v-model="newMsg">
      <button @click="add">确定</button>
    </div>
    <Child :msg="val"></Child>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import Child from './child.vue'
  
  const newMsg = ref('')
  const val = ref('')
  const add = () => {
    val.value = newMsg.value
  }
  </script>

子组件使用onBeforeUpdate更新父组件的list数据，接着生成列表再传递给父组件进行显示

<template>
    <div class="body">
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
</template>

<script setup>
import { ref,watch,onBeforeUpdate, onUpdated } from 'vue';
const list = ref(['html', 'css'])
const props = defineProps({ msg:''})

onBeforeUpdate(() => {
    list.value.push(props.msg)
})
</script>

onBeforeUpdate是Vue生命周期的一个钩子函数，它在组件即将进行重新渲染和更新DOM之前被调用。

使用数据响应式wacth

子组件使用watch监听父组件的更新的list数据，接着生成完整列表再传递给父组件进行显示

<template>
    <div class="body">
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
</template>

<script setup>
import { ref,watch,onBeforeUpdate, onUpdated } from 'vue';
const list = ref(['html', 'css'])
const props = defineProps({ msg:''})

watch(
    () => props.msg,
    (newValue, oldValue) => {
        list.value.push(newValue)
    }
)
</script>

• () => props.msg 这里的箭头函数是一个getter，每次watch检查props.msg的变化时，都会调用这个函数获取当前的值。
• 回调函数 : (newValue, oldValue) => { list.value.push(newValue) } 这个函数在props.msg的值改变时被调用。它将newValue追加到list数组中，因此每当props.msg更新时，它的新值就会被添加到list数组的末尾。

子父通信

发布订阅模式:

• 子组件使用事件总线或者Vue的自定义事件$emit来发布事件。
• 父组件监听这些事件，并在事件触发时接收数据。

通过发布订阅机制，父组件订阅一个事件，子组件发布该事件并且将要传递的值一起发布出来，父组件在定义的函数中获取该值

父组件为列表部分接收子组件传递过来的数据，并将该数据添加到数组

<template>
    <Child @addMsg="handle"></Child>
    <div class="body">
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import Child from '../demo3/child.vue';
  
  const list = ref(['html', 'css'])
  
  const handle = (e) => {
    list.value.push(e)
  }
  </script>

• 子组件通信:使用<Child @addMsg="handle"></Child>引入了名为Child的子组件，并监听其addMsg事件。当子组件触发此事件时，会调用父组件中的handle方法。

• 事件处理:handle方法用于接收子组件传递过来的数据（通过e参数），并将该数据添加到list数组中。子组件中有一个按钮或输入框，用户可以输入或选择一些内容，然后点击按钮触发addMsg事件，将内容发送给父组件。

子组件为输入框部分(header)传递参数给父组件

<template>
    <div class="header">
      <input type="text" v-model="newMsg">
      <button @click="add">确定</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const newMsg = ref('')

const emits = defineEmits(['addMsg']) //定义事件
const add = () => {
    emits('addMsg', newMsg.value) //发送事件
}
</script>

• 事件定义:使用defineEmits来定义子组件可以触发的自定义事件。在这里，定义了一个名为addMsg的事件。

• 事件触发:在add方法中，当用户点击按钮时，会触发addMsg事件，并将newMsg的当前值作为参数传递给父组件。这是通过调用emits('addMsg', newMsg.value)实现的。

defineEmits是Vue 3中用于定义组件可以触发哪些自定义事件的组合API函数。在使用<script setup>语法糖的组件中，你可以使用defineEmits来声明组件可以触发的事件及其参数类型。

v-model:

• 父组件使用v-model绑定一个属性给子组件。
• 子组件通过触发update:modelValue事件来通知父组件数据更新。

父组件v-modle绑定属性传给子组件，子组件发布update：'updata:list'事件通知父组件数据更新了

父组件为列表部分接收子组件传递过来的数据，并将该数据添加到数组

<template>
    <Child v-model:list="list"></Child><!-- v-model 双向绑定这个list -->
    <div class="body">
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
  </template>
  
  <script setup>

  import { ref } from 'vue';
  import Child from './child.vue';
  
  const list = ref(['html', 'css'])
  
  </script>

• 双向数据绑定: v-model:list="list" 这个指令在父组件中用于与子组件Child进行双向数据绑定。list是父组件中定义的一个响应式数组，v-model允许父组件和子组件之间的数据同步更新。

子组件为输入框部分(header)传递参数给父组件

<template>
    <div class="header">
      <input type="text" v-model="newMsg">
      <button @click="add">确定</button>
    </div>
</template>

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

const props = defineProps({
  list: []
})
  
const newMsg = ref('')
const emit = defineEmits(['updata:list'])
const add = () => {
    const arr = props.list
    arr.push(newMsg.value)
    emit('updata:list', arr)
}
</script>

• 属性接收:子组件通过defineProps定义了一个名为list的属性，用于接收从父组件传入的数组。

• 事件发射:子组件通过defineEmits定义了一个名为update:list的事件，用于在子组件内部状态改变时，将更新后的数组值传递回父组件。

ref和defineExpose:

• 父组件使用ref来引用子组件的实例。
• 子组件通过defineExpose来暴露内部的数据和方法，供父组件访问。

父组件通过ref获取子组件的MOD结构，从而获取到子组件defineExpose()暴露出来的

父组件访问子组件的数据显示出头部和列表部分

<template>
    <Child ref="childRef"></Child>
    <div class="body">
      <ul>
        <li v-for="item in chuildRef?.list">{{item}}</li>
      </ul>
    </div>
</template>
  
<script setup>
import Child from './child.vue';
import { ref,onMounted } from 'vue';

const childRef = ref(null);
</script>

• 父组件中通过ref引用获取子组件的实例，并访问子组件通过defineExpose暴露出来的属性或方法
• 定义引用:在父组件的<script setup>部分，使用ref创建了一个名为childRef的响应式引用，初始化为null。这个引用将在子组件挂载后指向子组件的实例。

子组件为输入框部分(header)和列表部分，供父组件使用

<template>
    <div class="header">
      <input type="text" v-model="newMsg">
      <button @click="add">确定</button>
    </div>
  
    <div class="body">
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const newMsg = ref('')
  const list = ref(['html', 'css'])
  
  const add = () => {
    list.value.push(newMsg.value)
  }

  defineExpose({ list })//子组件心甘情愿暴露出来的list
  </script>

• 状态暴露:通过defineExpose函数，子组件明确地暴露了list状态。这意味着父组件可以通过ref引用访问子组件实例，并进一步访问到list属性。

provide和inject:

• 父组件使用provide来提供数据或方法。
• 子组件通过inject来注入父组件提供的数据或方法。

父组件为输入框部分(header)，并提供列表的数据给子组件

 <template>
    
    <div class="header">
      <input type="text" v-model="newMsg">
      <button @click="add">确定</button>
    </div>
  <Child></Child>
  </template>
  
  <script setup>
  import { ref,provide } from 'vue';
  import Child from './child.vue'
  
  const newMsg = ref('')
  const list = ref(['html', 'css'])
  
  const add = () => {
    list.value.push(newMsg.value)
  }

  provide('list',list.value)
  </script>

• 数据提供:父组件通过provide函数将list状态暴露出去。provide接受一个对象，其中的键是标识符，值是要提供的数据。在例子中，'list'是标识符，list.value是提供的数据。

子组件为列表部分获取到父组件提供的列表数据

<template>
    <div class="body">
      <ul>
        <li v-for="item in list">{{item}}</li>
      </ul>
    </div>
  </template>
  
<script setup>
import { inject } from 'vue';

const list = inject('list');
</script>

• 子组件通过inject('list')获取父组件提供的list数据。这样，子组件就可以访问和使用父组件的list状态，无需通过属性传递或事件通信，实现了组件间的数据共享。

结语

每种通信方式都有其适用场景，开发者需要根据具体需求来选择合适的通信方式。例如，对于简单的数据传递，props和events可能是最直接的方式。而对于更复杂的场景，可能需要使用provide/inject或ref来实现更深层次的组件通信。

目前只讨论了父与子组件之间的通信情况，如果是多组件或兄弟组件之间的复杂传递数据就可以直接使用上数据仓库来进行数据的存储与调用，例如pinia、vuex。