学习vue3第十三节（组件之间传参通讯：props/$emit/$on/provide/inject/$attrs/$parent/pinia）

本文主要是介绍学习vue3第十三节（组件之间传参通讯：props/$emit/$on/provide/inject/$attrs/$parent/pinia），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

常用的通讯方式有如下方式

props
自定义事件 $emits $on
provide/inject
$refs | $parent | $children | defineExpose()
$attrs 祖孙传值
vuex | pinia

1、父子组件之间使用 props 传参

父组件向子组件传递参数，参数可以是Object、Object[]、Array、String、Number、Boolean、Function等多种数据类型的参数。
如：通过reactive 创建一个person 响应式对象，在子组件中通过 personSon对象接收数据；

父组件：

<template>
<div class="myComponents"><!-- 组件之间传参 --><MyComParamsSon :personSon="person" :name="name"@changeNameSon="changeName"></MyComParamsSon>
</div>
</template>
<script setup>
import MyComParamsSon from './myComParamsSon.vue';
import { ref, reactive } from 'vue';
let name = ref('Andy')
let person = reactive({name: 'Andy',age: 18
})
const changeName = (data) => {person.name = data
}
</script>

子组件：
子组件中接受参数，建议vue3 中直接使用setup 语法糖下的，difineProps 宏函数；
注意：一定要声明接受数据的数据类型，避免传入的数据类型不是子组件想要的，从而导致子组件报错；
如：
difineProps 不用引入，可以直接在setup 语法糖中使用；不建议使用 setup() {return} 函数处理；

const props = defineProps({name: {type: String,default: '未知'},personSon: {type: Object,default: () => ({})}
})

或者ts写法
// const propsTs = defineProps<{
//   name: string,
//   personSon: {
//     name: string,
//     age: number
//   }
// }>()

具体代码如下：

<template>
<div class="son-page">This is a child page.<br>name: {{ name }}<br>personSon-name: {{ personSon.name }}<br>personSon-age: {{ personSon.age }}<br>newPerson: {{newPerson.name}}<br><el-button type="primary" @click="handleChangeName">change name</el-button>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
// 建议在setup 中直接使用defineProps 和 defineEmits;
//
// const props = defineProps(['name', 'person']) // 不建议使用这种，这种没有进行类型声明，传入时会导致未知问题
// 推荐使用js 中
const props = defineProps({name: {type: String,default: '未知'},personSon: {type: Object,default: () => ({})}
})
let newPerson = ref({name: 'default Name',age: 15
})
// ts
// const propsTs = defineProps<{
//   name: string,
//   personSon: {
//     name: string,
//     age: number
//   }
// }>()
const emit = defineEmits(['changeNameSon'])
// ts 中使用
// const emit = defineEmits<{
//   (e:'changeNameSon', msg:string):void
// }>()
const handleChangeName = () => {emit('changeNameSon', 'Andy 二货')newPerson.value.name = personSon.person.name
}
</script>

2、子组件向父组件传参 $emit $on

子组件向父组件传递参数或者触发事件时候，通常使用 $emit('事件名称', 参数)触发事件, 参数可有可无，
在vue3 中可以直接使用 defineEmits 宏函数处理，

建议使用：

<script setup lang='ts'>// 这里difineemits 中的事件名称需要与 emit 触发的事件名称保持一致const emit = defineEmits(['changeNameSon'])const handleChangeName = () => {emit('changeNameSon', 'Andy 二货')newPerson.value.name = personSon.person.name}// ts 中使用// const emits = defineEmits<{//   (e:'changeNameSon', msg:string):void// }>()// const emits = defineEmits<{//   changeNameSon: [msg: String] // 具名元组语法// }>()
</script>
在父组件中使用v-on绑定事件: 简写 @changeNameSon="changeName"
如：
<MyComParamsSon :personSon="person" :name="name"@changeNameSon="changeName"
></MyComParamsSon>

详细代码，请看上面的父子传参代码

3、祖孙后代之间传参 provide/inject

通常使用于父子之间传参；
vue2 中通常使用eventBus实现，但是在vue3中，使用provide/inject，已经抛弃eventBus了

详情查看第11节 provide/inject 详细介绍

4、$refs $parent $children 父子之间传参，事件触发

vue3中已废弃 $children 链式调用；
vue3 中建议直接使用setup 语法糖，在setup语法糖中可以直接使用 defineExpose() 宏函数，代替选项式API中的 expose

而在使用$refs 或者 $parent 进行链式调用时候，需要先在本组件中使用defineExpose 宏函数，
将对应的属性方法暴露出来；

如下图
父组件：

<template><div class="myComponents"><MyComParamsSon :name="name"@changeNameSon="changeName"ref="sonRef"></MyComParamsSon></div>
</template>
<script setup>
import MyComParamsSon from './myComParamsSon.vue';
import { ref, reactive, onMounted } from 'vue';
// 声明一个ref 引用，注意名称需要与dom 结构中的名称保持一致，用于调用子组件的属性方法
const sonRef = ref('sonRef')
let name = ref('Andy')
const changeName = (data) => {person.name = data
}
// 若想在子组件中通过 $parent 获取父组件中的属性方法，则同样需要现在 父组件中使用 defineExpose 来暴露
// 父组件暴露的属性和方法，在子组件中通过 $parent 获取
defineExpose({name
})
onMounted(() => {//  sonRef.value 获取子组件通过defineExpose 暴露的属性方法console.log('--', sonRef.value.newPerson)
})
</script>

子组件：

<template>
<div class="son-page" >This is a child page.<br><el-button type="primary" @click="handleChangeParents($parent)">change parents</el-button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const sonRef1 = ref('sonRef1')// 推荐使用js 中
const props = defineProps({name: {type: String,default: '未知'},personSon: {type: Object,default: () => ({})}
})let newPerson = ref({name: 'default Name',age: 15
})const emits = defineEmits(['changeNameSon'])
const handleChangeName = () => {emits('changeNameSon', 'Andy 二货')newPerson.value.name = props.personSon.name
}// 使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
// 即如果想要通过链式获取组件的属性、方法，就需要在子组件中通过 defineExpose进行暴露
defineExpose({newPerson, // 暴露的属性handleChangeName // 暴露的方法，父组件可以调用
})const handleChangeParents = (parent) => {子组件通过 传入的$parent 获取父组件中通过 defineExpose 暴露的属性方法console.log('==parent=', parent.name)
}
onMounted(() => {console.log('=sonRef1=', sonRef1)
})
</script>

5、$attrs 子组件中读取父组件的参数

$attrs 用于获取父组件向下级组件传递的属性，不包含下级组件 defineProps 中声明的属性，具有属性透传性；多用于祖孙组件之间的属性传递；
而这种方案不需要通过 defineExpose 宏函数来暴露；

父组件

<template>
<div class="myComponents" ref="parentRef"><!-- 组件之间传参 --><MyComParamsSon :personSon="person" :name="name":job="job" // job 参数没有在子组件 props 中声明@changeNameSon="changeName"ref="sonRef"></MyComParamsSon>
</div>
</template>
<script setup>
import MyComParamsSon from './myComParamsSon.vue';
import { ref, reactive, onMounted } from 'vue';
const sonRef = ref('sonRef')
// console.log('=sonRef==', sonRef)
let name = ref('Andy')
let person = reactive({name: 'Andy',age: 18
})
let job = ref('躺平工程师')const changeName = (data) => {person.name = data
}
onMounted(() => {console.log('--', sonRef.value.newPerson)
})
</script>

子组件：

<template>
// 第一种方案，一定要使用v-bind="$attrs"， 进行绑定
<div class="son-page" ref="sonRef1" v-bind="$attrs" >This is a child page.<!-- 第二种方式，点击事件获取 --><el-button type="primary" @click="handleChangeParents($parent, $attrs)">change parents</el-button><br><!-- 子组件中不使用，job而孙子组件中需要使用时 --><GrandSon :job="attrs.job"></GrandSon>
</div>
</template>
<script setup>
import { ref, onMounted, useAttrs } from 'vue'
import GrandSon from './myComParamsGrandSon.vue'
const sonRef1 = ref('sonRef1')// 推荐使用js 中
const props = defineProps({name: {type: String,default: '未知'},personSon: {type: Object,default: () => ({})}
})let newPerson = ref({name: 'default Name',age: 15
})const emits = defineEmits(['changeNameSon'])
const handleChangeName = () => {emits('changeNameSon', 'Andy 二货')newPerson.value.name = props.personSon.name
}const handleChangeParents = (parent, $attrs) => {<!-- 第二种方案获取 attrs 中的属性 -->console.log('==parent=', parent.name, $attrs)
}
<!-- 第一种方案获取 attrs 中的属性 -->
const attrs = useAttrs()
onMounted(() => {console.log('=sonRef1=', sonRef1, attrs)// console.log('=$attrs=', $attrs)
})
</script>

孙子组件：
先在DOM 上绑定 v-bind="$attrs",再在setup 中引入 import { useAttrs } from 'vue'，
获取 attrs 中没有在props 中声明的属性

<template>
<div class="grand-son" @click="getGrandParentsAttr($attrs)" v-bind="$attrs">孙子组件中的job:{{ job }} // 躺平工程师<br>
</div>
</template>
<script setup>
import { ref, computed, onMounted, useAttrs } from 'vue'
let job = ref('默认值')
const getGrandParentsAttr = (attrs) => {console.log('==attrs=', attrs)
}
const attrs = useAttrs()
onMounted(() => {console.log('==useAttrs=', useAttrs())job.value = attrs.job
})
</script>