[Vue学习笔记]组件、插槽、作用域插槽

组件(Component)是Vue功能之一。组件可以扩展HTML元素，封装可重用的代码。根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己所需，使用不同的组件来拼接页面。同时组件注册包括全局注册和局部注册两种。

组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。这是局部组件的一个实例:

 <div id="app" v-cloak>
        <!-- 如何指定一个插槽先写一个template标签再加上v-slot  简写为# -->
        <center>   
            <template #a>
                hello a
            </template>    
        </center>
        <center>
            <template #b>
                hello b
            </template>
        </center>
        <center>hello</center>
        //组件可以进行多次的复用
        <btn>登陆</btn>
        <btn>注册</btn>
        <btn></btn>
    </div>
    
    new Vue({
            el: "#app",
            //属于本实例的局部组件
            components: {
                //定义了一个组件btn，对应的HTML内容是template中的标签  
                // slot默认插槽 
                //
                btn: {
                    template: `
                <button class="btn">
                <slot>按钮</slot>
                </button>
                `
                },
                center: {
                    template: `       
                    <div class="flex j-c a-c">
                    <slot name='a'></slot>
                    <slot name='b'></slot>
                    <slot></slot>
                    </div>
                    `
                }
            },
            data() {
                return {
                }
            },
        })

插槽分为普通插槽和作用域插槽，<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换，上面的例子中有写到。下面的是作用域插槽的使用：

其实两者很类似，只不过作用域插槽可以接受子组件传递过来的参数。

 <div id="app" v-cloak>
        <!-- 通过属性的方式来使这个模版能拿到父级的list的值        这句话里的data是形参list是值 -->
        <my-list :data='list'></my-list>
        <my-list :data='list2'>
        <!-- v-slot用来接收  <slot :row='item'>{{item.name}}</slot>  传来的东西  -->
        <template v-slot='item'>
         <a href="">{{item.row.name}}</a>
        </template>
        </my-list>
    </div>
    
     new Vue({
            el: "#app",
            components: {
                // 如果名字中有- 加"即可
    // 用了props一定要注意将template里面的东西改成props里形参的名字
    // <slot :row='item'>{{item.name}}</slot>    slot也可以绑定从内部向外传递东西
                'my-list': {
                    props: ['data'],
                    template: `
    <ul>
        <li v-for='item in data'>
            {{item.id}}--
            <slot :row='item'>{{item.name}}</slot>
        </li>
    </ul>
                 `
                },
            },
            data() {
                return {
                    list: [{
                            id: 1,
                            name: 'www'

                        },
                        {
                            id: 2,
                            name: 'bbb'

                        },
                        {
                            id: 3,
                            name: 'ccc'

                        },
                    ],
                    list2: [{
                            id: 1,
                            name: 'dad'

                        },
                        {
                            id: 2,
                            name: 'shs'

                        },
                        {
                            id: 3,
                            name: 'geg'

                        },
                    ],
                }
            },
        })