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状态管理