学习总结

插槽slot

插槽用于决定将所携带得内容插入指定得某个位置，从而使模板分块，具有模块化得特质和更大得重用性。插槽显示或不显示、怎样显示都是由父组件控制得，而插槽在哪里显示由子组件决定

默认插槽

    <div id="app">
        <h1>我是父组件</h1>
        <chachao>
            <p>我是插槽</p>
        </chachao>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component("chachao",{
            template:`
            <div>
            <h1>我是子组件</h1>
            <slot></slot>
            </div>
            
            `
        })
        var vm = new Vue({
            el:"#app"
        })

插槽的默认内容

当父组件没有给插槽传值的时候插槽会显示默认内容

    <div id="app">
        <h1>我是父组件</h1>
        <chachao>
            <!-- <p>我是插槽</p> -->
        </chachao>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component("chachao",{
            template:`
            <div>
            <h1>我是子组件</h1>
            <slot>我是默认内容</slot>
            </div>
            `
        })
        var vm = new Vue({
            el:"#app"
        })

具名插槽

可以通过name属性为每个插槽起一个名字，通过名字来传递想要的内容。

    <div id="app">
        <chachao>
            <p slot="data1">我是插槽1</p>
            <p slot="data2">我是插槽2</p>
        </chachao>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component("chachao",{
            template:`
            <div>
            <slot name="data1"></slot>
            <slot name="data2"></slot>
            </div>
            `
        })
        var vm = new Vue({
            el:"#app"
        })
    </script>

作用域插槽

  父组件：
  <div id="#app">
<子组件>
<template v-slot:名字>
slot 的传递内容
</template>
</子组件>
  </div>
  子组件：
  <子组件>
<slot name="名字"><slot>
</子组件>

学习心得

最近讲的东西比较综合，理解是不行的，自己打算做个小项目。