摘要：全局混入對(duì)象不會(huì)覆蓋組件中的同名鉤子函數(shù)將混合為一個(gè)數(shù)組，因此都將被調(diào)用。而鉤子函數(shù)混入和組件中的不合并，而是都執(zhí)行，先執(zhí)行混入中的鉤子，再執(zhí)行組件中的。

給子組件或者原始DOM加上ref特性，就可以為其聲明引用標(biāo)記，添加引用后，可以在Javascript中使用vm|this.$refs.refname獲取子組件或原始DOM。若是原始DOM，則效果如document.querySelector(ele)；若是子組件，則結(jié)果為一個(gè)VueComponent實(shí)例對(duì)象

Vue.component("component-1", {
    props: ["subProp"],
    data: function () {
        return {
            subData: "child"s data"
        }
    },
    template: "
子組件內(nèi)容
"
})
Vue.component("component-2", {
    template: "
sub component
"
})
var vm = new Vue({
    el: "#app-1",
    data: {
        message: "send child"s props",
        subPropVal: "default",
        subDataVal: "default",
        commonDomVal: "default",
        items: [
            { id: "1", case: "piece" },
            { id: "2", case: "處刑之塔" },
            { id: "3", case: "獵殺聯(lián)盟行動(dòng)" }
        ]
    },
    methods: {
        setVal: function () {
            this.subDataVal = this.$refs.child.subData
            this.subPropVal = this.$refs.child.subProp
            this.commonDomVal = this.$refs.common.value
            console.log(this.$refs.child)
            console.log(this.$refs.item)
            console.log(this.$refs.item2)
            
        },
    }
});

    
    
    取值
    

    獲取子組件data屬性[{{subDataVal}}]
    

    獲取子組件prop特性[{{subPropVal}}]
    

    獲取普通DOM元素值[{{commonDomVal}}]
    


    

        
{{item.case}}
    

    

        
    

父組件數(shù)據(jù)定義：message、subPropVal、subDataVal、commonDomVal和一個(gè)數(shù)組items。
子組件一中定義有：propssubProp、datasubData

我們?cè)谝粋€(gè)組件和一個(gè)原始input上添加了ref特性，并把父組件的message通過Prop傳遞給子組件的subProp。
現(xiàn)在，就可以在綁定的按鈕單擊事件的回調(diào)中，通過this.$refs獲取組件和原始DOM的信息了，這些信息包括子組件的props、data和input元素的value值

如果和v-for一起使用，那么this.$refs.refname返回的是一個(gè)數(shù)組，引用原始DOM為一個(gè)原始DOM的數(shù)組，引用子組件為一個(gè)VueComponent數(shù)組，如在上面的例子中使用v-for&ref把輸出打印在控制臺(tái)如下：

在Vue中沒有通用的API來實(shí)現(xiàn)組件繼承的，但也有一些手段可以重復(fù)利用那些多個(gè)組件中相同的功能，比如這里的Mixin。當(dāng)多個(gè)組件有相同屬性或方法時(shí)，可以抽取相同部分放入一個(gè)Mixins對(duì)象中。

Vue.mixin({
    created: function () {
        console.log("全局混入對(duì)象")
    }
})
var superPowersMixin = {
    data: function () {
        return {
            superPowers: false,
            //不會(huì)覆蓋組件中的`img`
            img: require("./angular.png"),
        }
    },
    methods: {
        superMe: function () {
            this.$el.classList.add("super")
            this.superPowers = true
        },
        goback: function () {
            this.$el.firstChild.innerText = "Forever Stay Here"
        }
    },
    created: function () {
        this.$options.template =
            "Go Back" +
            "Add Filter" +
            this.$options.template
    }
}
new Vue({
    el: "#app-1",
    components: {
        vueImage: {
            data: function () {
                return { img: require("./vue.png") }
            },
            template: "
",
            methods: {
                goback: function () {
                    this.$el.classList.remove("super")
                    this.superPowers = false
                }
            },
            //同名鉤子函數(shù)將混合為一個(gè)數(shù)組，因此都將被調(diào)用。混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用。
            created: function () {
                this.$options.template = "
" +
                    this.$options.template +
                    "
"
            },
            mixins: [superPowersMixin]
        },
        reactImage: {
            data: function () {
                return { img: require("./react.png") }
            },
            template: "
",
            created: function () {
                this.$options.template = "
" +
                    this.$options.template +
                    "
"
            },
            mixins: [superPowersMixin]
        }
    }
})

在以上示例混入對(duì)象中，我們使用了屬性、模板、方法和鉤子函數(shù)，對(duì)于不同的選項(xiàng)來說，我們有不同的合并規(guī)則。
總體上來講，當(dāng)選項(xiàng)是一個(gè)對(duì)象時(shí)，我們就合并成一個(gè)大的對(duì)象，如果對(duì)象中有重名的屬性時(shí)，我們就丟棄混入對(duì)象中的屬性。比如為組件vueImage添加混入時(shí)，屬性img和方法goback()就被丟棄。而鉤子函數(shù)混入和組件中的不合并，而是都執(zhí)行，先執(zhí)行混入中的鉤子，再執(zhí)行組件中的。

利用混入可以模擬下繼承系統(tǒng)。

var SuperClass = {
    template: "
Super Method{{message}}
",
    data() {
        return {
            message: "super class data"
        }
    },
    methods: {
        superMethod() {
            this.message = "run super class method to change data"
        }
    }
}
var SubClass = {
    mixins: [SuperClass],
    template: "
Override Super Method
                  Sub Method{{message}}
",
    methods: {
        superMethod() {
            this.message = "override super class method"
        },
        subMethod() {
            this.message = "run sub class method to change data"
        }
    }
}
new Vue({
    el: "#app-2",
    components: { SuperClass, SubClass }
})

在這個(gè)例子中，為組件subClass混入了superClass，并從superClass那里繼承了屬性message，重寫了方法superMethod()，又添加了自己的方法subMethod()。感覺可以開發(fā)開發(fā)- -b。