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

2024-04-02 09:46:03
开发
24

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

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>

6、vuex | pinia 状态管理，多层级之间传递参数，

若项目相对负责，页面应用嵌套多，建议使用；单页面应用，简单的功能建议使用props 和 $emits 实现，
后续章节会专门介绍 pinia；

以上仅仅代表自己的理解，如有差错，欢迎批评指正

原文地址:https://blog.csdn.net/weixin_39593730/article/details/137246677 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1774976554745597952.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部