詳解vue組件通信的三種方式
1. 第一種方式就是官方推薦的
有時候兩個組件也需要通信(非父子關(guān)系)。在簡單的場景下,可以使用一個空的 Vue 實例作為中央事件總線。
本質(zhì)是通過派發(fā)事件然后監(jiān)聽事件從而更改值,(父子組件通信也可用這個方式,但是不同的一點就是父子組件通信的時候可以不用一個空的Vue實例來做中轉(zhuǎn),這種方式我這里就不做演示的了,因為我的題目是非父子通信)
空的Vue實例 bus
import Vue from 'vue' const bus = new Vue() export default bus
組件add
<!--html結(jié)構(gòu)--> <template> <div> <p>我是add組件的num:{{num}} </p> <button @click='add'>增加</button> </div> </template>
// js <script> import bus from '../bus.js' export default { data() { return { num: '' } }, methods: { add() { if (this.num) { this.num++ bus.$emit('num-change', this.num) } else { this.num = 1 bus.$emit('num-change', this.num) } } } } </script>
組件sub
<!--html結(jié)構(gòu)--> <template> <div> <p>我是sub組件的num:{{num}}</p> </div> </template>
// js <script> import bus from '../bus.js' export default { data() { return { num: '' } }, created() { bus.$on('num-change', num => { this.num = num }) } } </script>
2.通過vuex來進(jìn)行狀態(tài)管理
vuex我這里就不詳細(xì)說了,網(wǎng)上教程太多。
3.取巧利用js中的對象的特性(指針)
Object在內(nèi)存中存儲只是保留指針,所以父組件通過props來給兄弟組件傳遞同一個對象,兄弟組件接收的對象跟父組件的對象都是指向同一個內(nèi)存地址,故不管在哪里修改都能保持一致。
上代碼,父組件把同一個對象傳遞給add組件和sub組件,那么add組件和sub組件接收到的對象也是指向父組件app的對象都是指向同一個內(nèi)存地址。add組件對傳入的對象進(jìn)行+1的操作,sub組件進(jìn)行-1的操作。
父組件 app.vue
<!--html結(jié)構(gòu)--> <template> <div id="app"> <h1>我是app父組件的newNum:{{share.newNum}}</h1> <hr> <!--將同一個對象同時傳給兩個子組件--> <addnum :share1='share'></addnum> <hr> <subnum :share2='share'></subnum> </div> </template>
// js import addnum from './components/add' import subnum from './components/sub' export default { data() { return { share: { newNum: 1 } } }, components: { addnum, subnum } }
子組件add.vue
<!--html結(jié)構(gòu)--> <template> <div> <p>我是add組件的newNum:{{share1.newNum}} </p> <button @click='add'>增加</button> </div> </template>
//js <script> export default { methods: { add() { this.share1.newNum++ } }, props: { share1: { type: Object, } } } </script>
子組件sub.vue
<!--html結(jié)構(gòu)--> <template> <div> <p>我是sub組件的newNum:{{share2.newNum}}</p> <button @click='numSub'>減少</button> </div> </template>
// js <script> export default { methods: { numSub() { this.share2.newNum-- } }, props: { share2: { type: Object, } } } </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題
今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue.js響應(yīng)式數(shù)據(jù)的簡單實現(xiàn)方法(一看就會)
Vue最巧妙的特性之一是其響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue.js響應(yīng)式數(shù)據(jù)的簡單實現(xiàn)方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03vue如何使用element ui表格el-table-column在里面做判斷
這篇文章主要介紹了vue如何使用element ui表格el-table-column在里面做判斷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08