vue 组件通信

---

一、props(父传子)

父组件

<button @click="props">props</button>
<child1 class="child" :action="action"></child1>
<script>
	import child1 from '@/components/child1'
	methods:{
        props(){
            this.action = '父亲给大儿子梆一拳'
        }
    }
</script>

子组件

<!-- 显示为：父亲给大儿子梆一拳 -->
<div>{{action}}</div>
<script>
export default {
    props:{
        action:{
            type:String,
            default:''
        }
    }
}
</script>

二、emit（子传父）

子组件

<button @click="emit">emit</button>
<script>
	methods:{
        emit(){
            this.$emit('son1','大儿子给父亲一拳')
        }
    }
</script>

父组件

<span>{{son_action}}</span>
<child1 class="child" @son1="son1Action"></child1>
<script>
import child1 from '@/components/child1'
export default {
    methods:{
        son1Action(e){
            this.son_action = e
        }
    }
}
</script>

三、$children（父传子）

父组件

<button @click="child">$child</button>
<div class="son"> 
    <child1 class="child"></child1>
    <child2 class="child"></child2>
</div>
<script>
	import child1 from '@/components/child1'
	import child2 from '@/components/child2'
	methods:{
        child(){
            this.$children[1].action='父亲给二儿子梆一拳'
        },
    }
</script>

子组件child2

<!-- 显示为：父亲给大儿子梆一拳 -->
<div>{{action}}</div>
<script>
export default {
    data() {
        return {
            action:''
        }
    },
}
</script>

四、$parent（子传父）

子组件

<button @click="parent">$parent</button>
<script>
	methods:{
        parent(){
            this.$parent.son_action = '二儿子给父亲一拳'
        }
    }
</script>

父组件

<span>{{son_action}}</span>
<child2 class="child"></child2>
<script>
	import child2 from '@/components/child2'
	export default {
	    data() {
	        return {
	            son_action:'',
	        }
    	},
	}
</script>

五、ref（父传子）

父组件

<button @click="ref">ref</button>
<child2 ref="son2" class="child"></child2>
<script>
	import child2 from '@/components/child2'
	export default {
	    methods:{
	        ref(){
	            this.$refs.son2.action = '父亲给二儿子又一拳'
	        }
    	}
	}
</script>

子组件

<div>{{action}}</div>
<script>
	export default {
	    data() {
	        return {
	            action:''
	        }
	    },
	}
</script>

六、provide/inject（父传孙）

父组件

<button @click="provide">provide</button>
   provide(){
       return {
           vueInfo :this
       }
   },
   methods:{
       provide(){
           this.grandSon = '父亲给孙子一拳'
       }
   }

孙组件

<h3>孙子组件</h3>
<div>
     {{vueInfo.grandSon}}
 </div>
<script>
export default ({
    inject:['vueInfo']
})
</script>

七、$attrs（父传子/父传孙）

父传子

父组件

<child1 class="child" :attrs="attrs"></child1>
<script>
	import child1 from '@/components/child1'
	methods:{
        data() {
	        return {
	            attrs:'父亲给大儿子一脚'
	        }
    },
    }
</script>

子组件

<div>{{$attrs.attrs}}</div>

个人理解：$attrs作用相当于简写的props，直接用。

注意⚠️: $attrs里面的属性是props没有设置的属性，如果props里面有配置， $attrs里面的属性就不包括了。

父传孙

父组件

<child2 class="child" :giveGrandSon="giveGrandSon"></child2>

子组件child2

<grandson v-bind="$attrs"></grandson>
<script>
import grandson from '@/components/grandson'
</script>

孙组件grandson

<div>
   $attrs:<span>{{$attrs.giveGrandSon}}</span>
</div>

个人理解：$attrs具有穿透性，传递给孙组件

八、$listeners(孙传父)

孙组件grandson

methods: {
    sendMessage(){
        this.$emit('grandSonSend','爷爷我要打死你！')
    }
},

子组件child2

<grandson v-on="$listeners"></grandson>
<script>
import grandson from '@/components/grandson'
</script>

父组件

<child2 class="child" @grandSonSend="grandSonSend"></child2>
methods:{
    grandSonSend(e){
        console.log('grandSonSend',e);
        //爷爷我要打死你！
    }
}

九、eventBus(兄弟组件)

定义一个eventBus,本质是vue的一个实例，新建一个event-bus.js文件

import Vue from 'vue'

const eventBus = new Vue();

export default eventBus;

子组件child1

<script>
import eventBus from './event-bus'
methods:{
    givebrother() {
        eventBus.$emit('brother','给弟弟一拳')
    }
},
</script>

子组件child2

import eventBus from './event-bus'
methods:{
    fromBrotherAction(e){
        console.log('fromBrotherAction',e);
        // 给弟弟一拳
    }
},
mounted(){
    eventBus.$on('brother',this.fromBrotherAction)
},
beforeDestroy() {
	// 避免潜在的内存泄漏问题
    eventBus.$off('brother',this.fromBrotherAction)
}

十、运用$parent和ref实现兄弟组件通信

子组件child1

this.$parent.$refs.子组件2.子组件2的方法

十一、vuex

详细的vuex 我会单独出一篇！

---

如果🈶️小伙伴喜欢，要一键三连哦～～～ (´๑•_•๑)