組件通信可以分為父子組件通信、非父子組件通信，可以是數(shù)據(jù)的傳遞，也可以是方法的傳遞，先介紹數(shù)據(jù)的相互傳遞，再介紹方法的相互傳遞。

父組件到子組件傳遞數(shù)據(jù)：

一、通過props，父組件可以傳遞動態(tài)和靜態(tài)數(shù)據(jù)。

//父組件 <template><div id="app">//第一種靜態(tài)數(shù)據(jù) <HelloWorld msg="我是父組件的數(shù)據(jù)"/>//第二種動態(tài)綁定 <HelloWorld :msg="message"/></div> </template><script> import HelloWorld from './components/HelloWorld.vue'export default {name: 'app',data(){return{message: '我來自父組件'}},components: {HelloWorld} } </script> 復(fù)制代碼

//子組件 <template><div class="hello">來自父組件的值：{{msg}}</div> </template><script> export default {name: 'HelloWorld',props: ['msg']//或者 props: { msg: String//指定傳入的類型 }//或者 props: { msg: String,default: '默認(rèn)值' //指定默認(rèn)值 } } </script>復(fù)制代碼

二、provide / inject

provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應(yīng)用程序代碼中。并且這對選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

//父組件 <template><div><child-dom></child-dom></div> </template> <script>import childDom from "./components/ChildDom.vue";export default {data() {return{}},provide: {house: '房子',car: '車子',money: '￥10000'},methods:{},components:{childDom},} </script>復(fù)制代碼

//子組件 <template><div></div> </template> <script>export default {data() {return{}},inject: {house: {default: '沒房'},car: {default: '沒車'},money: {default: '￥4500'}},created () {console.log(this.house, this.car, this.money)},methods:{}} </script> 復(fù)制代碼

子組件傳值給父組件

一、通過props的回調(diào)

//父組件 <template><div id="app"><HelloWorld :msg="message"/></div> </template><script> import HelloWorld from './components/HelloWorld.vue'export default {name: 'app',data(){return{}},methods: {message: (data)=>{console.log('我是父組件的方法，在子組件中被觸發(fā)了')console.log('來自子組件的值是：'+data)}},components: {HelloWorld} } </script>復(fù)制代碼

//子組件 <template><div class="hello" @click="msg('來自子組件的值~~')">來自父組件的方法，點(diǎn)我執(zhí)行</div> </template><script> export default {name: 'HelloWorld',props: ['msg'] } </script>復(fù)制代碼

二、通過$emit

//父組件 <template><div id="app"><HelloWorld @getData="message"/></div> </template><script> import HelloWorld from './components/HelloWorld.vue'export default {name: 'app',data(){return{}},methods: {message: (data)=>{console.log('來自子組件的值是：'+data)}},components: {HelloWorld} } </script>復(fù)制代碼

//子組件 <template><div class="hello" @click="goFun">點(diǎn)擊傳值給父組件</div> </template><script> export default {name: 'HelloWorld',data(){return{s: 1111}},methods: {goFun(){this.$emit('getData',this.s)}} } </script>復(fù)制代碼

三、.sync修飾實(shí)現(xiàn)雙向綁定

//父組件 <template><div id="app"><HelloWorld :show.sync='valueChild'/>父組件值：{{valueChild}}<button @click="changeValue">點(diǎn)擊</button></div> </template><script> import HelloWorld from './components/HelloWorld.vue'export default {name: 'app',data(){return{valueChild:true}},methods: {changeValue(){console.log('父組件的值被修改：'+this.valueChild)this.valueChild =!this.valueChild}},components: {HelloWorld} } </script>復(fù)制代碼

//子組件 <template><div><div><p>子組件值：{{show}}</p><button @click.stop="closeDiv">修改</button></div></div> </template><script> export default {name: 'HelloWorld',methods: {closeDiv() {this.$emit('update:show', !this.show); //觸發(fā) input 事件，并傳入新值}},props:['show'] } </script>復(fù)制代碼

關(guān)系型組件跨級傳遞(根組件、兒子組件、孫子組件)

一、使用 $attrs 和 $listeners

通過 $attrs 將值連續(xù)往下傳遞（和props傳遞類似），傳遞過程中可以只選擇當(dāng)前需要的值，組件中可以通過 inheritAttrs:false 保持當(dāng)前組件的屬性純凈度。通過 $listeners 可以在（…子組件）中 this. $emit(“upRocket”,11111)來觸發(fā)父組件中的事件，從而達(dá)到傳值給父組件的目的。

//父組件 <template><div><child-dom:foo="foo":coo="coo"@upRocket="reciveRocket"></child-dom></div> </template> <script>import childDom from "./components/ChildDom.vue";export default {data() {return {foo:"Hello, world",coo:"Hello,rui"}},methods:{reciveRocket(data){console.log("我是根組件,這是接受的孫子組件的數(shù)據(jù)"+data)}},components:{childDom},} </script>復(fù)制代碼

//子組件 <template><div><p>foo:{{foo}}</p><childDomChild v-bind="$attrs" v-on="$listeners"></childDomChild></div> </template> <script> import childDomChild from './childDomChild'; export default {name:'child-dom',props:["foo"],inheritAttrs:false,components:{childDomChild} } </script>復(fù)制代碼

//孫子組件 <template><div><p>coo:{{coo}}</p> <button @click="startUpRocket">發(fā)送數(shù)據(jù)到根組件</button> </div> </template> <script>export default {name:'child-dom',props:["coo"],methods: {startUpRocket() {this.$emit("upRocket");}} } </script>復(fù)制代碼

二、$parent $children

其實(shí)通過 $ r e f 可以獲取到子組件中的一些掛載屬性和值， 父組件如果要獲取子組件的方法可以通過this.$refs.mychild.funName("…");這種方式，給子組件指定ref名稱。同理，通過 $parent $children可直接操作數(shù)據(jù)和方法。

• this. $parent查找當(dāng)前組件的父組件。
  
• this.$children查找當(dāng)前組件的直接子組件，可以獲取到全部直接子組件， 需要注意$children 并不保證順序，也不是響應(yīng)式的。可以通過this.$root.$children[0].$children[0].$children[0].msg連續(xù)查找
  
• this.$root查找根組件，并可以配合$children遍歷全部組件

//父組件 <template><div>父組件的值：{{msg}}<child-dom></child-dom><button @click="change">父組件點(diǎn)擊修改</button></div> </template> <script>import childDom from "./components/ChildDom.vue";export default {data() {return{msg: 0}},methods:{change(){this.msg = this.$children[0].childMsgthis.$children[0].childMsg = '子組件的值被父組件修改了'}},mounted(){},components:{childDom},} </script>復(fù)制代碼

//子組件 <template><div>子組件的值：{{childMsg}}<button @click="decrease()">子組件點(diǎn)擊修改</button></div> </template> <script> export default {name:'child-dom',data() {return {childMsg : 111};},methods: {decrease() {this.childMsg = this.$parent.msgthis.$parent.msg = "子組件修改了父組件的值"}} } </script>復(fù)制代碼

非關(guān)系組件傳值

一、EventBus

適用于小型項(xiàng)目，可以達(dá)到任意組件相互通信的效果

//組件a <template><div>{{fontCount}}<child-dom></child-dom></div> </template> <script>//import Vue from 'vue' //export const EventBus = new Vue()import { EventBus } from "./assets/bus.js";import childDom from "./components/ChildDom.vue";export default {data() {return{fontCount: 0}},methods:{},mounted(){EventBus.$on("decreased", ({num}) => {this.fontCount -= num});},components:{childDom},} </script>復(fù)制代碼

//組件b <template><div><button @click="decrease()">-</button></div> </template> <script> import { EventBus } from "../assets/bus.js"; export default {name:'child-dom',data() {return {num: 1,deg:180};},methods: {decrease() {EventBus.$emit("decreased", {num:this.num});}} } </script>復(fù)制代碼

二、vuex

請移步官方文檔查閱具體內(nèi)容

轉(zhuǎn)載于:https://juejin.im/post/5d254c0a6fb9a07f065594d9

總結(jié)

以上是生活随笔為你收集整理的vue通信的N种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。