Vue3【一】组件间的通信方式汇总

小刘加油！

已于 2022-08-06 12:24:03 修改

阅读量2.4k

点赞数 3

分类专栏：前端经典面试题 Vue 文章标签： javascript vue.js 前端组件通信

于 2022-08-06 12:23:38 首次发布

本文链接：https://blog.csdn.net/qq_41131745/article/details/126186650

版权

Vue 同时被 2 个专栏收录

28 篇文章 3 订阅

订阅专栏

前端经典面试题

9 篇文章 7 订阅

订阅专栏

1. Props 方式（父传子）

Props 方式是Vue中最常见的一种父传子的方式，使用也比较简单。

// 父组件
<template>
	<div>
		<h1>父组件</h1>
		<hr />
		<Son :value='parentValue'></Son>
	</div>
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
import son from './components/son.vue'

export default defineComponent({
  components: { son },
  setup () {
    const parentValue = ref('父组件传给子组件的值')
    return {
    	parentValue
    }
  }
})
</script>

子组件：由于Vue3中没有this，所以我们想要在setup中使用父组件传过来的值，需要使用setup函数的第一个参数，或者defineProps

注意：当使用 setup 语法糖的时候，使用defineProps

// 子组件
<template>
  <div>
    <p>子组件</p>
    <div>{{ value }}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
 
export default defineComponent({
  props: ['value'],
  setup (props, context) {
    console.log(props.value) // 父组件传给子组件的值
  }
})
</script>

2. emit（子传父）

emit 方式也是组件常用的通信方式，用于子传父

// 父组件
<template>
  <div>
    <h1>父组件</h1>
    {{ parentValue }}
    <hr />
    <son @handle="handle"></son>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import son from './components/son.vue'
 
export default defineComponent({
  components: { son },
  setup () {
    let parentValue = ref('父组件传给子组件的值')
    const handle = value => {
      parentValue.value = value
    }
    return {
    	parentValue, 
    	handle
    }
  }
})
</script>

子组件通过emit触发父组件中的方法传值，需要使用setup函数的第二个参数，或者 defineEmits

// 子组件
<template>
  <div>
    <p>子组件</p>
    <button @click="handleClick">点击改变父组件的值</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
 
export default defineComponent({
  setup (props, context) {
    const handleClick = () => {
      context.emit('handle', '子组件传给父组件的值')
    }
    return {
    	handleClick
    }
  }
})
</script>

子组件点击按钮之后，emit 一个自定义事件，并将添加的值作为参数传递
第一个参数：为父组件中调用子组件中@后面的函数名
第二个参数：为所传递的值

父组件中只需监听子组件自定义的事件，然后执行对应的操作。

3. expose / ref方式

expose 与 ref 主要用于父组件获取子组件的属性或方法。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法

// 子组件
<script setup>
    // 方法一、使用expose对外暴露属性或方法
    ctx.expose({
        childName: "子组件的名称属性",
        childMethod(){
            console.log("子组件的方法");
        }
    })
    // 方法二，使用defineExpose
    //  defineExpose({
    //     childName: "子组件的名称属性",
    //     childMethod(){
    //         console.log("子组件的方法");
    //     }
    // })
</script>
 
// 父组件 
<template>
    <child ref="childRef"></child>
    <button @click="handlerClick">按钮</button>
</template>
<script setup>
    import child from "./child.vue";
    import { ref } from "vue";
    const childRef = ref(null);
    const handlerClick = () => {
        // 获取子组件对外暴露的属性
        const childName = childRef.value.childName;
        console.log(childName);
        // 调用子组件对外暴露的方法
        comp.value.childMethod();
    }
</script>

在这里解释下，可能会有些小伙伴们看不懂上面子组件中这些代码的写法。其实也很简单，方法一没有使用setup语法糖，方法二使用了setup语法糖，把setup放在了 script 标签里。ctx是setup函数的第二个参数；defineExpose是语法糖的写法，需要从vue中引入。

4. attrs 方式

attrs 主要用于子组件获取父组件中没有通过props接收的属性
什么意思呢，看下面的代码

// 父组件 传值
<child :msg1="msg1" :msg2="msg2" title="子组件"></child>
<script setup>
    import child from "./child.vue";
    import { ref, reactive } from "vue";
    const msg1 = ref("信息1");
    const msg2 = ref("信息2");
</script>
 
// 子组件 接收
<script setup>
    // import { defineProps, useAttrs } from "vue";
    // 子组件接收msg1
    const props = defineProps({
        msg1: String
    })
    
    const attrs = useAttrs();
    // 因为子组件接收了msg1，所以打印的结果中不会包含msg1, { msg2:"信息1", title: "子组件" }
    // 如果子组件没有接收msg1，打印的结果就是 { msg1: "信息1", msg2:"信息12", title: "子组件" }
    console.log(attrs); 
</script>

5. provide / inject 方式

provide / inject 方式是 Vue 中提供的一对API，无论层级多深，API都可以实现从父组件到子孙组件的数据传递
provide 与 inject 主要为父组件向子组件或孙组件或多级嵌套的子组件通信。
.
provide：在父组件中可以通过 provide 提供需要向后代组件传递的信息
inject：从父组件到该组件，无论嵌套多少层，都可以直接用 inject 拿到父组件传送的信息。

// 父组件
<script setup>
    import { provide } from "vue";
    // 父组件通过 provide 提供给子组件的信息
    provide("name", "提供给后代组件的信息");
</script>
 
// 子组件或后代组件（不管几级子组件）
<script setup>
    import { inject } from "vue";
    // 后代组件通过 inject 可以直接拿到父组件提供的信息
    const name = inject("name");
    console.log(name); 
</script>