Vue中插槽的基本使用

1.1 作用

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件，分类：默认插槽、具名插槽、作用域插槽

2.1 基本使用

2.1.2 默认插槽

父组件中：
        <Category>
           <div>我是要插入的内容</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>默认内容</slot>    //如果没有，则显示默认内容
            </div>
        </template>

2.1.2 具名插槽

父组件中：
        <Category>
            <template slot="center">    //slot 第一张写法，可以在普通div中，也可以在template中
              <div>我是要插入的内容1</div>
            </template>
            <template v-slot:footer>    //v-slot 第二张写法，只能在template中
               <div>我是要插入的内容2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">默认内容1</slot>
               <slot name="footer">默认内容2</slot>
            </div>
        </template>

2.2.3 作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（例如数据在子组件中，结构在父组件中）

父组件中：
        <Category>
            <template scope="scopeData">//通过scope去接收插槽传递的数据（对象），然后使用
                <ul>
                    <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                </ul>
            </template>
        </Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>    //定义一个插槽，将数据传递给使用者
            </div>
        </template>
        
        <script>
            export default {
                name:'Category',
                //数据在子组件自身
                data() {
                    return {
                        games:['foo','bar','Tim']
                    }
                },
            }
        </script>

如果觉得有帮助欢迎点赞、评论。 上述内容仅仅代表个人观点，如有错误，请指正。如果你也对前端感兴趣，欢迎访问我的个人博客sundestiny.github.io/myblog/