动态组件的几种小技巧

我们在使用vue时学习使用组件是不可或缺的一部分，使用组件我们必须先要创建一个组件

1.组件的全局定义

直接使用 Vue.component（‘组件名’,{ }）进行创建 我们同样可以使用template标签将组件内容写在外面，这种写法组件代码会有高亮显示，但是这样会让组件的复用性变的很差 通过id来定义这个组件

2.动态组件的基本原理

在接下来的学习中我们使用到了动态组件，在使用动态组件中我们需要知道一个小知识keep-alive标签，这个标签可以让页面原本有的内容不会被组件覆盖掉 插槽 在动态组件中slot就是插槽添加在组件中避免这里面的东西被删除掉， 可以在组件中的 name属性自由控制位置，要注意的是 template只能用v-slot标签

动态组件通过component标签来定义component是一个vue里面已经定制好的组件我们可以直接通过:is=name’来控制你要使用的组件

<div id="box">
    <ul>
        <li @click="type=home">aaa</li>
        <li @click="type=list">bbb</li>
        <li @click="type=shopcal">ccc</li>
    </ul>
    <keep-alive>
        <!-- 保持活着，让里面的组价不被删除重新创建 -->

    </keep-alive>
    <!-- component是一个vue里面已经定制好的组件
    
    -->
    <component :is="type">
        <p slot="a">这里面原本有的东西aaa</p>
        <p slot="b">这里面原本有的东西bbb</p>
        <p slot="c">这里面原本有的东西ccc</p>
        <template v-slot:a>
            <p></p>
          </template>
    </component>
    
</div>

<script>
        Vue.component(home, {
            template: `
            <div>
            111111111
            <slot name="a"></slot>
            2222222222
            <slot name="b"></slot>
            3333333333
            <slot name="c"></slot>
            </div>
            <slot name="footer"></slot>
            `
        })

        Vue.component(list, {
            template: `
            <div>
            2222222222
            <slot name="b"></slot>
            </div>
            `
        })
        Vue.component(shopcal, {
            template: `
            <div>
            3333333333
            <slot name="c"></slot>
            </div>
            `
        })
        var vm = new Vue({
            el: "#box",
            data:{
                type:home
            }
        })
    </script>

在这里插入代码片

–逆战mz