VUE 2.6/3.0所有组件通信方式盘点，总有你不知道的

下面我们就开始用代码（一言不合就上代码）详细的介绍vue组件传值的N种方式

方式一：普通父子传值与接收

通过props,$emit实现传递

 

父组件的代码

<template>
    <div id="container">
        <Child :msg="text"></Child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      text: "父组件的值"
    };
  },
  methods: {
    dataClick(data){
        consloe.log(data,'子传父的值')
    }
  },
  components: {
    Child
  }
};
</script>

子组件的代码

<template>
    <div id="container">
        <div>{{msg}}</div>
        <button type="text" @click="dataChange">子传父</button>
    </div>

</template>
<script>
export default {
  props:{
    msg: String
  }
  methods: {
    dataChange(){
        this.$emit('dataClick','子传父的值')
    }
  },
};
</script>

方式二：VUEX状态管理

通过vuex状态管理取值

过于简单不做记录

方式三：bus兄弟传值传值

子组件A传递

import bus from "./bus.js"

bus.$emit("bload","我叫叶落森"); 

子组件B接收

import bus from "./bus.js"

bus.$on("bload",value=>{  
    console.log(value);        
});

方式四：vue3.0传值方式

注意：setup没有this

使用context.emit()传递

一个简单的导航组件示例

子组件

<template>
	<div class="tabCom">
        <div 
			v-for="(item,index) in tabArr" 
			:key="index" 
			:class="index == tabIndex?'native':''"
			@click="handerTabClick(index)"
		>{{item}}</div>
    </div>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	export default defineComponent({
        //子组件接收
		props: {
			tabIndex: {
				type:Number,
				default:0
			},
			tabArr:{
				type:Array,
				default(){
					return []
				}
			},
		},
		setup(props,context){
			function handerTabClick(index:number){
				context.emit('handerTabClick',index)  //子组件传递
			}
			return {handerTabClick}
		}
	})
</script>

父组件

<template>
    //父组件传递
	<tabNav :tabArr='tabArr' :tabIndex='tabIndex' @handerTabClick="handerTabClick"/>
</template>

<script lang="ts">
import { defineComponent,ref,reactive,toRefs,watch } from 'vue'
import tabNav from '../components/tabNav.vue'


interface Istate {
    [propName:string]:any
}

export default defineComponent({
    components:{
        tabNav
    },
    setup(){
        const state:Istate = reactive({
            tabIndex:ref(0),
            tabArr:['标准库','编制','审核'],            
        })
        handerTabClick(index:number){
             state.tabIndex = index //父组件接收
        },

        
        return{
            ...toRefs(state),
        }
    }
})
</script>

方式五：$attrs传值方式 

不限制层级，父组件向孙子组件传值  避免props多层嵌套

假设 组件 父组件A-子组件B-孙子组件C

A组件
<B :temp="tempdata" @tempFn="fatherFn" prop='$attrs不会传递child组件中定义的props值'></B>

B组件
<C v-bind="$attrs"></C>
props: { 'prop' },


当B定义了props   $attrs自动过滤props的值

C组件

 <template>
   <div id="son">
     {{ $attrs.temp }}//直接获取A传到C的值
   </div>
</template>

this.$emit('tempFn')

方式六：provide 和 inject 跨级传递值 

不限制层级，父组件向孙子组件传值  避免props多层嵌套

provide/inject 绑定并不是响应式的。我们可以通过传递一个 ref property 或 reactive 对象给 provide 来改变这种行为

//父传递
provide(){
    return {
        datas:()=>'123', //()=>{return ...}实现响应式更新
    }
}

//任意组件接收
inject:['datas']
<div>{{datas()}}</div>

创作不易，如果还有其他方式，请留言补充。。。