VUE 组件化开发

1. 组件传值

祖先和后代之间

• provide/inject：能够实现祖先给后代传值

// ancestor
provide() {
    return {foo: 'foo'}
}
// descendant
inject: ['foo']

父组件 => 子组件

• 属性props

// child
props: { msg: String }
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>

• 引用refs

// parent
<HelloWorld ref="hw"/>
this.$refs.hw.xx

子组件 => 父组件

• 自定义事件

// child
this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>

兄弟组件

• 通过共同祖辈组件

// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')

特殊传值

• dispatch：后代给祖先传值

// 定义一个dispatch方法，指定要派发事件名称和数据
function dispatch(eventName, data) {
    let parent = this.$parent
    // 只要还存在父元素就继续往上查找
    while (parent) {
    // 父元素用$emit触发
        parent.$emit(eventName,data)
        // 递归查找父元素
        parent = parent.$parent
    }
}
// 使用，HelloWorld.vue
<h1 @click="dispatch('hello', 'hello,world')">{{ msg }}</h1>
// App.vue
this.$on('hello', this.sayHello)

• boardcast: 祖先给后代传值

function boardcast(eventName, data) {
    this.$children.forEach(child => {
        // 子元素触发$emit
        child.$emit(eventName, data);
        if (child.$children.length) {
            // 递归调用，通过call修改this指向 child
            boardcast.call(child, eventName, data);
        }
    });
}

• 任意两个组件之间：事件总线 或 vuex

// Bus：事件派发、监听和回调管理
class Bus{
    constructor(){
    // {
    // eventName1:[fn1,fn2],
    // eventName2:[fn3,fn4],
    // }
        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))
        }
    }
}
// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handle)
// child2
this.$bus.$emit('foo')