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來進行狀態(tài)管理
vuex我這里就不詳細說了，網(wǎng)上教程太多。
3.取巧利用js中的對象的特性（指針）
Object在內(nèi)存中存儲只是保留指針，所以父組件通過props來給兄弟組件傳遞同一個對象，兄弟組件接收的對象跟父組件的對象都是指向同一個內(nèi)存地址，故不管在哪里修改都能保持一致。
上代碼，父組件把同一個對象傳遞給add組件和sub組件，那么add組件和sub組件接收到的對象也是指向父組件app的對象都是指向同一個內(nèi)存地址。add組件對傳入的對象進行+1的操作，sub組件進行-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>// jsimport 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)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
