Vue傳值方式

1. provide和inject實現祖先與後代組件傳值

/* 祖先組件 */
export default {
    //...
    methods: {
		test(val) {
			console.log("test: ", val);
		}
	},
	provide() {
		return {
			test: this.test
		}
	}
}
/* 後代組件 */
export default {
    //...
    inject: ['test'],
	created() {
		this.test("aa");// test:  aa
	}
}

2. props實現父向子傳值

/* 父組件 */
<Son :name="'zhnagsan'" :age="2" />
/* 子組件 */
export default {
    props: {
        name: String,
        age: Number
    }
}

3. $emit實現子組件傳數據給父組件

子組件觸發postMsg事件，進而觸發父組件show函數，並通過show傳遞參數

/* 父組件 */
<Son @postMsg="show" />
/* 子組件 */
export default {
    data(){
        return {
            msg:"子組件給父組件的數據"
        }
    },
    created(){
        this.$emit('postMsg',this.msg);
    }
}

4. $emit和$on實現兄弟組件傳值

/* 將中間者bus掛載到Vue原型 */
Vue.prototype.$bus = new Vue();
/* 輸出端組件調用對應方法 */
addC() {
    this.$bus.$emit('a-c', this.num);
}
/* 接收端設置監聽 */
created() {
    this.$bus.$on('a-c', num => {
        this.num += num;
    });
}

5. 使用Vuex狀態管理