コンポーネント（5）：その他

コンポーネントリファレンス - REF、$、参考文献

サブコンポーネントまたは生のDOMを追加するにはrefプロパティを、あなたはその声明をマーク参照することができ、参照を追加した後、Javascriptのに使用することができますvm|this.$refs.refname取得サブアセンブリまたはオリジナルのDOM。そのような効果としてDOM元、もしdocument.querySelector(ele)、サブアセンブリ場合、結果はVueComponent、オブジェクトのインスタンス

Vue.component('component-1', {
    props: ['subProp'],
    data: function () {
        return {
            subData: "child\'s data"
        }
    },
    template: '<div>子组件内容</div>'
})
Vue.component('component-2', {
    template: '<li>sub component</li>'
})
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: '猎杀联盟行动' }
        ]
    },
    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)
            
        },
    }
});

<div id="app-1">
    <component-1 ref="child" :sub-prop="message"></component-1>
    <input type="text" ref="common" value="normal DOM element" />
    <button @click="setVal">取值</button>
    <br>
    <span>获取子组件data属性[{{subDataVal}}]</span>
    <br>
    <span>获取子组件prop特性[{{subPropVal}}]</span>
    <br>
    <span>获取普通DOM元素值[{{commonDomVal}}]</span>
    <br>

    <ul v-for="item in items">
        <li ref="item">{{item.case}}</li>
    </ul>

    <ul v-for="item in items">
        <component-2 ref="item2"></component-2>
    </ul>
</div>

データ定義親message要素：subPropVal、subDataVal、、commonDomValおよび配列items。
小道具：定義されたサブアセンブリ持ちsubProp、データをsubData

私たちは一つの成分あり<component-1>、元の1 inputアドオンref機能、および親コンポーネントmessageによって、Propサブアセンブリに渡しますsubProp。
さて、あなたはに拘束されるコールバックのイベントでボタンをクリックすることができthis.$refsた情報と、元のDOMのコンポーネントへのアクセス、情報は、サブコンポーネントが含まれprops、dataとinputの要素value値を

場合とv-for併用し、それはthis.$refs.refnameアレイ、元のDOM DOM元の配列を参照し、サブアセンブリへの参照戻りVueComponent、上記の例で使用される配列、v-for&ref次のように出力印刷コンソール。

ミックス（ミックスイン）

ヴューで達成することが共通APIは、コンポーネント継承されないが、例えば、本明細書ミックスインなどのコンポーネント、複数の同様の機能を再利用するための何らかの手段が存在してもよいです。複数のコンポーネントが同じプロパティまたはメソッドを持っているときは、ミックスインオブジェクトに同一の部分を抽出することができます。

Vue.mixin({
    created: function () {
        console.log('全局混入对象')
    }
})
var superPowersMixin = {
    data: function () {
        return {
            superPowers: false,
            //不会覆盖组件中的`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 =
            '<button class="btn btn-sm btn-primary" @click="goback" v-show="superPowers">Go Back</button>' +
            '<button class="btn btn-sm btn-primary" @click="superMe" v-if="!superPowers">Add Filter</button>' +
            this.$options.template
    }
}
new Vue({
    el: '#app-1',
    components: {
        vueImage: {
            data: function () {
                return { img: require('./vue.png') }
            },
            template: "<div><img :src='img' width='80' height='80'></div>",
            methods: {
                goback: function () {
                    this.$el.classList.remove("super")
                    this.superPowers = false
                }
            },
            //同名钩子函数将混合为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。
            created: function () {
                this.$options.template = '<div>' +
                    this.$options.template +
                    '</div>'
            },
            mixins: [superPowersMixin]
        },
        reactImage: {
            data: function () {
                return { img: require('./react.png') }
            },
            template: "<div><img :src='img' width='80' height='80'></div>",
            created: function () {
                this.$options.template = '<div>' +
                    this.$options.template +
                    '</div>'
            },
            mixins: [superPowersMixin]
        }
    }
})

<style>
    .super {
        filter: hue-rotate(120deg);
    }
</style>
<div id="app-1">
    <vue-image></vue-image>
    <react-image></react-img>
</div>

混合物上記の例では、我々はさまざまなオプションのプロパティ、テンプレート、方法、およびフック関数を使用して、我々は異なる合併規則を持っています。
オブジェクトは、同じ名前の属性を持っている場合、このオプションは、ターゲットであるとき一般的に言えば、我々は我々が混在オブジェクトプロパティを破棄し、一つの大きなオブジェクトに統合されます。などの成分vueImage添加は混合され、プロパティimgおよび方法がgoback()廃棄されます。ミックスとマージフック機能コンポーネントが、実行されていない、混合フックで最初の実行は、コンポーネント行います。

アナログの継承

混合連続を使用すると、システムをシミュレートすることができます。

var SuperClass = {
    template: '<p><button class="btn btn-sm btn-primary" @click="superMethod">Super Method</button>{{message}}</p>',
    data() {
        return {
            message: 'super class data'
        }
    },
    methods: {
        superMethod() {
            this.message = 'run super class method to change data'
        }
    }
}
var SubClass = {
    mixins: [SuperClass],
    template: '<p><button class="btn btn-sm btn-primary" @click="superMethod">Override Super Method</button>\
                  <button class="btn btn-sm btn-primary" @click="subMethod">Sub Method</button>{{message}}</p>',
    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 }
})

<div id="app-2">
    <super-class></super-class>
    <sub-class></sub-class>
</div>

この例では、コンポーネントのsubClass混合superClass、からsuperClassそこに継承されたプロパティmessage、メソッドを書き換えsuperMethod()、および独自のメソッドを追加しますsubMethod()。-bを-開発開発することができます感じ。