props/$emit 適用父子組件通信
ref與parent/children適用父子組件通信
attrs/listeners,provide/inject 適用于隔代組件通信
vuex,EventBus(事件總線) 適用于父子、隔代、兄弟組件通信
slot插槽方式
attrs實例
父組件（這時候我們傳了兩個參數(shù)title和type）
<template>
<div>
<div class="father">我是父組件，點擊傳值給孫子組件</div>
<child :title="title" :type="type" />
</div>
</template>
<script>
import child from "./components/child";
export default {
components: {
child
},
data() {
return {
title: "",
type: ""
};
},
methods: {}
};
</script>
子組件（注意：子組件使用了title，那么孫子組件就拿不到title值。）文章來源：http://www.zghlxwxcb.cn/news/detail-634614.html
<template>
<div>
<div class="child">
<div>我是子組件{{title}}</div>
</div>
<grandson v-bind="$attrs" />
</div>
</template>
<script>
import grandson from "./grandson";
export default {
components: {
grandson
},
props: {
title: {
type: String,
default: ""
}
},
watch: {
$attrs() {
console.log(this.$attrs, "attrs");
},
},
data() {}
};
</script>
孫子組件（該組件只能顯示type）文章來源地址http://www.zghlxwxcb.cn/news/detail-634614.html
<template>
<div>
<div class="grandson">我是孫子組件{{title}}{{type}}</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ""
},
type: {
type: String,
default: ""
}
},
watch: {
title() {
console.log(this.title, "=====孫子組件");
},
type() {
console.log(this.type, "=====孫子組件");
}
},
data() {
return {};
}
};
</script>
到了這里，關(guān)于Vue中的的通信方式有幾種？隔代組件的通信你用那種方式解決？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
