vue的动态组件和混入

这篇文章我们了解一下vue的动态组件和混入。那什么是动态组件呢？动态组件就是对组件进行动态切换；那什么是混入呢？混入就是将组件中某些属性提取出进行复用。那下面我们具体去了解这两个内容

动态组件

在vue中，我们动态的切换组件必须使用<component>元素中的is属性。

    <div id="app">
        <button v-for="tab of tabs" :class="{active:currentTab==tab.title}" @click="currentTab=tab.title">{{ tab.name }}</button>
        <br>
        <component :is="tab_name">
        </component>
    </div>

        Vue.component('tab-p', {
            template: `<p>这个标签是P标签</p>`
        });
        Vue.component('tab-input', {
            data: function() {
                return {
                    val: "这个是input标签"
                }
            },
            template: `<input type="text" v-model="val" />`
        })
        Vue.component('tab-div', {
            template: `<div>这个标签是div标签</div>`
        })

        let vm = new Vue({
            el: "#app",
            data: {
                currentTab: "p",
                tabs: [{
                    title: "p",
                    name: "点击切换到p标签"
                }, {
                    title: "input",
                    name: "点击切换到input标签"
                }, {
                    title: "div",
                    name: "点击切换到div标签"
                }]
            },
            computed: {
                tab_name() {
                    return "tab-" + this.currentTab;
                }
            }
        })

在上述例题中，我们在页面定义了三个按钮，分别控制三个组件。当点击某个按钮时，更改currentTab的值，从而导致了计算属性tab_name的值更新，<component>元素中的is属性的值也随之修改，组件也自动切换了

在切换过程中，我们改变其中input标签的值之后，然后在进行多次切换重新回到input标签时，我们会发现input的值没有保留被重新赋值了。这表明：每次切换，vue都重新创建了组件，并没有保留状态。对于这种情况，我们可以使用<keep-alive>元素将动态组件包裹起来，这样可以保持组件的状态。

    <div id="app">
        <button v-for="tab of tabs" :class="{active:currentTab==tab.title}" @click="currentTab=tab.title">{{ tab.name }}</button>
        <br>
        <keep-alive>
            <component :is="tab_name">
            </component>
        </keep-alive>
    </div>

混入

混入是一种非常灵活的方式，它主要用于分发Vue组件中可复用的功能，一个混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将就"混合"进入组件本身

    <div id="app">
        <my-component>
        </my-component>
    </div>
    <script>
        let Mymixin = {
            data: function() {
                return {
                    count: 0
                }
            },
            methods: {
                my_click() {
                    this.count++;
                }
            }
        }

        let Component = Vue.extend({

            mixins: [Mymixin],
            template: `<div><input type="button" @click="my_click()" value="点击一下" :id="count" /><p>你点击按钮的次数：{{ count }}</p></div>`
        })

        let vm = new Vue({
            el: "#app",
            components: {
                myComponent: Component
            }
        })
    </script>

混入是组件中mixins选项定义的，组件会继承对象中的所有内容。

当混入对象和组件本身包含同名的选项时，他们之间的合并策略是：

1. 数据对象进行合并时，如果发生冲突以组件的数据优先
2. 同名的钩子函数会合并到一个数组中，这些函数合并之后都会被调用，且混入对象的函数在组件本身函数之前调用
3. methods、components等选项合并时，如果发生冲突以组件的选项优先

    <div id="app">
        <my-component>
        </my-component>
    </div>
    <script>
        let Mymixin = {
            data: function() {
                return {
                    count: 0
                }
            },
            created() {
                console.log("这是混入对象的钩子函数");
            },
            methods: {
                my_click() {
                    this.count++;
                    console.log("这是混入对象的事件");
                }
            }
        }

        let Component = Vue.extend({
            data: function() {
                return {
                    count: 10
                }
            },
            methods: {
                my_click() {
                    this.count += 2;
                    console.log("这是组件本身的事件");
                }
            },
            mixins: [Mymixin],
            template: `<div><input type="button" @click="my_click()" value="点击一下" :id="count" /><p>你点击按钮的次数：{{ count }}</p></div>`
        })

        let vm = new Vue({
            el: "#app",
            components: {
                myComponent: Component
            }
        })
    </script>