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

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

  1. props
  2. 自定义事件 $emits $on
  3. provide/inject
  4. $refs | $parent | $children | defineExpose()
  5. $attrs 祖孙传值
  6. 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;

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

相关推荐

  1. vue3组件

    2024-04-02 09:46:03       5 阅读
  2. Vue组件

    2024-04-02 09:46:03       20 阅读
  3. Vue3组件之间通信方式

    2024-04-02 09:46:03       9 阅读
  4. vue 父子组件之间通过 v-model

    2024-04-02 09:46:03       27 阅读
  5. vue3使用mitt用于组件之间

    2024-04-02 09:46:03       21 阅读

最近更新

  1. 冒烟测试(Smoke Testing)简介

    2024-04-02 09:46:03       0 阅读
  2. 题解:P9426 [蓝桥杯 2023 国 B] 抓娃娃

    2024-04-02 09:46:03       0 阅读
  3. 读《零基础学PYthon》有感

    2024-04-02 09:46:03       0 阅读
  4. GitLab存储空间满了

    2024-04-02 09:46:03       0 阅读
  5. CV 面试指南—深度学习知识点总结(5)

    2024-04-02 09:46:03       0 阅读
  6. Gitlab相关,【推送项目】

    2024-04-02 09:46:03       0 阅读
  7. 11-3.Vue2.x基本列表—列表排序—sort

    2024-04-02 09:46:03       0 阅读
  8. spring注解整理

    2024-04-02 09:46:03       0 阅读

热门阅读

  1. vue2 预览word文件

    2024-04-02 09:46:03       5 阅读
  2. C++宝强越狱1.0.6版本

    2024-04-02 09:46:03       5 阅读
  3. python 批量向MQTT服务器推送数据

    2024-04-02 09:46:03       5 阅读
  4. FastAPI Web框架教程 第13章 WebSocket

    2024-04-02 09:46:03       4 阅读
  5. 设计模式-单例模式(懒汉式)

    2024-04-02 09:46:03       6 阅读
  6. Anaconda conda常用命令

    2024-04-02 09:46:03       9 阅读