Vue组件化常用方法之组件传值与通信

<HelloWorld msg="Welcome to Your Vue.js App" />

<h1>{{ msg }}</h1>

props: {
 msg: String
}

<HelloWorld ref="hw" />

mounted() {
 this.$refs.hw.foo = "bar";
}

<p>{{ foo }}</p>

data() {
 return {
 foo: "foo"
 };
}

created() {
 console.log("第一个执行");
 console.log(this.$refs.hw); // undefined
 this.$nextTick(() => {
 console.log("第三个执行");
 console.log(this.$refs.hw); // 此时可以获取到
 });
}

mounted() {
 console.log("第二个执行");
 this.$refs.hw.foo = "bar";
}

this.$children[0].xx = "xxx";

this.$emit('childFoo');

<HelloWorld2 @childFoo="onChildFoo"></HelloWorld2>

methods: {
 onChildFoo() {
 console.log("====== onChildFoo ========");
 }
}

this.$emit('childFooSingle', 'foo');

<HelloWorld2 @childFooSingle="onChildFooSingle($event)"></HelloWorld2>

methods: {
 onChildFooSingle(e) {
 console.log(e); // foo
 }
}

this.$emit('childFooMultiple', 'foo', 'bar', 'dong');

<HelloWorld2 @childFooSingle="onChildFooMultiple(arguments)"></HelloWorld2>

methods: {
 onChildFooMultiple(msg) {
 console.log(msg[0]); // foo
 console.log(msg[1]); // bar
 console.log(msg[2]); // dong
 }
}

this.$parent.$on('foo', handle);

this.$parent.$emit('foo');

provide() {
 return {foo: 'foo'}
}

inject: ['foo']

provide() {
 return {
 dong: this.home
 };
},
data() {
 return {
 home: ["App home"]
 };
}

inject: ["dong"]

this.dong = ["App data"]; // 会报错，Avoid mutating an injected value directly since the changes will be overwritten whenever the provided component re-renders
this.dong.push("App data"); // 可以修改成功

class Bus{
 constructor(){
 this.callbacks = {}
 }
 $on(name, fn){
 this.callbacks[name] = this.callbacks[name] || []
 this.callbacks[name].push(fn)
 }
 $emit(name, args){
 if(this.callbacks[name]){
  this.callbacks[name].forEach(cb => cb(args))
 }
 }
}

export default Bus;

import Bus from "./plugins/bus";
Vue.prototype.$bus = new Bus()

this.$bus.$on('foo', handle)

this.$bus.$emit('foo')