vue傳值可分為父子之間傳值、兄弟組件之間傳值、跨代組件之間傳值

1.父子之間傳值：可以使用$emit/props

偽代碼如下

    <!-- 父組件 -->
    <child :value="value" @changeValue='changeValue'></child>
    data() {
        return {
            value:'parent',
        }
    },
    methods: {
        changeValue(val) {
            console.log(val)
        }
    }
    <!-- 子組件 -->
    <div>
        子組件 {{value}}
        <button @click="emitValue">傳值</button>
    </div>
    props: ['value'],
    methods: {
        emitValue() {
            this.$emit('changeValue', this.value+'+child')
        }
    }

2. 兄弟組件之間傳值

2.1. 可采用$emit/props ，子1傳父，父?jìng)髯?， 與父子之間傳值相似
2.2. 采用vuex存儲(chǔ)狀態(tài)

2.3. eventBus時(shí)間車

• eventsBus.$emit 發(fā)送數(shù)據(jù)
• eventBus.$on 監(jiān)聽數(shù)據(jù)
• eventBus.$off('msg') 取消監(jiān)聽指定事件
• eventBus.$off() 取消監(jiān)聽所有事件
  偽代碼

// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue()

<template>
<!-- 子1 -->
    <div>
        child01     {{msg}}
    </div>
</template>
<script>
import {eventBus} from '../js/eventBus'
export default {
    data() {
        return {
            msg: ''
        }
    },
    mounted() {
            // 先釋放監(jiān)聽，避免重復(fù)監(jiān)聽
            eventBus.$off('child02').$on('child02', val => {
                this.msg = val;
            })
        }
}
</script>



<template>
<!-- 子2 -->
    <div>
        <button @click="emitBorther">child02</button>
    </div>
</template>
<script>
import {eventBus} from '../js/eventBus'
export default {
    methods: {
        emitBorther() {
            eventBus.$emit('child02','我是child02')
        }
    }
}
</script>

注意
頁(yè)面銷毀時(shí)一定要釋放監(jiān)聽
監(jiān)聽事件時(shí)，需要先釋放監(jiān)聽，避免重復(fù)監(jiān)聽

3. 跨代組件傳值

3.1.采用vuex存儲(chǔ)狀態(tài)
3.2. provide/inject : 一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在其上下游關(guān)系成立的時(shí)間里始終生效。
偽代碼如下

// 父級(jí)組件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子組件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}