14.插槽slot的使用

1.不具名的slot

slot，插槽，就是对组件的功能进行扩展的接口，我们可以通过slot标签占位，然后我们可以自定义插槽位置的内容

<div id="app">
        <cpn1></cpn1>
        <cpn1><p>make the world a better place</p></cpn1>
    </div>
    <template id="cpn">
        <div>
            <h2>这是子组件</h2>
            <p>hello world</p>
            <slot><button>按钮</button></slot>
        </div>
    </template>
    <script>
        let cpn1 = {
            template: "#cpn",
            methods: {
                show() {
                    console.log('hello world')
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                cpn1
            }
        });
    </script>

2. 具名插槽

具名的插槽，就是我们有些时候，需要对多个地方进行修改，这时候我们就需要通过给slot标签添加name属性，然后在使用组件的时候通过slot=“name属性值”的方式来确定到底是哪一个slot标签需要更改。

<div id="app">
        <cpn1><i slot="second">你好，世界</i></cpn1>
        <cpn1>
            <p slot="first">make the world a better place</p>
            <i slot="second">你好，世界</i>
        </cpn1>

    </div>
    <template id="cpn">
        <div>
            <h2>这是子组件</h2>
            <p>hello world</p>
            <slot name="first"><button>按钮</button></slot>
            <slot name="second"></slot>
        </div>
    </template>
    <script>
        let cpn1 = {
            template: "#cpn",
            methods: {
                show() {
                    console.log('hello world')
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                cpn1
            }
        });
    </script>