vue组件化-插槽slot

插槽：类似电脑的usb，使用接口给电脑增加不同的功能，键盘/音响，而不是直接在组件里添加

插槽的作用：为了让封装的组件具有扩展性

具体的使用方法：

1.在组件模板中添加一个插槽，可以存着默认值

    <template id='cpn'>
        <div>
            <h2>i am component</h2>
            <slot>
                <!-- 默认值 -->
                <button>submit</button>
            </slot>
        </div>
    </template>

2.在组件中修改特定的内容

    <div id="app">
        <h1>{{msg}}</h1>
        <cpn>
            <button>案例1</button>
        </cpn>
        <cpn>
            <h5>---------</h5>
            <p>hello</p>
            <i>nihao</i>
        </cpn>
        <cpn>
            <span>hhhhh </span>
        </cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>

效果如图

具名插槽：当有多个插槽时，我们只想替换其中一个，就需要用到具名插槽了

 使用方法

1.在模板中添加slot插槽，给插槽添加name属性

    <template id='cpn'>
        <div>
            <h2>i am component</h2>
            <slot  name='c'>
                <span>center</span>
            </slot>
            <slot name='r'>
                <span>right</span>
            </slot>
            <slot name='c'>
                <span>right</span>
            </slot>
        </div>
    </template>

2.在引用组件时，通过slot属性选择想要修改的插槽

    <div id="app">
        <cpn>
            <span>hhhh</span>
        </cpn>
        <cpn>
            <span slot="c">hh555555h</span>
        </cpn>
    </div>

效果如图

编译作用域：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译

根据下面例子理解:vue实例和组件里面都有isShow，但是在组件中使用的是vue实例里面的，因为组件被使用在vue实例里面

    <div id="app">
        <h1>{{msg}}</h1>
        <!--isShow 使用的是实例里面的isShow  -->
        <cpn v-show='isShow'></cpn>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "hello",
                isShow: true
            },
            components: {
                cpn: {
                    template: "#cpn",
                    data() {
                        return {
                            isShow: false,
                            list: ['python', 'javascript', 'java', 'go', 'c++']
                        }
                    }
                }
            }
        })
    </script>

作用域插槽：父组件替换插槽的标签，内容是由子组件提供

 使用方法

1.在组件模板中v-bind绑定data=list，list是组件中data方法返回的一个数组

   <template id='cpn'>
        <div>
            <slot :data='list'>
                <span>{{list}}</span>
            </slot>
        </div>
    </template>

2.在ul中设置slot-scope属性，‘cpn’可以随意命名，

3.通过v-for循环cpn里面的data（此data即组件模板中传过来的data）

    <div id="app">
        <cpn>
            <ul slot-scope='cpn'>
                <li v-for='item in cpn.data'>{{item}}</li>
            </ul>
        </cpn>
    </div>

效果如图