Vue使用日记（10）：插槽slot的使用

最新推荐文章于 2022-08-28 04:19:59 发布

jimson_zhu

最新推荐文章于 2022-08-28 04:19:59 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/jimson_zhu/article/details/98668031

Vue.js 专栏收录该内容

33 篇文章 ¥99.90 ¥299.90

订阅专栏

本文详细介绍了Vue中的插槽机制，包括编译作用域的概念、默认插槽、具名插槽以及作用域插槽的使用。通过实例演示了如何通过插槽实现组件的可复用性和可扩展性，以达到在父组件中自定义子组件内容的效果。

在进行插槽的说明之前，先对一个概念进行说明：编译作用域。

编译作用域

官方给出的解析是：父模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

举一个例子：

<div id="app">
    <my-cpn v-show="isShow"></my-cpn>
</div>

<template id="myCpn">
    <h2>能否显示出来呢</h2>
</template>

<script>
    Vue.component('my-cpn',{
        template:"#myCpn",
        data() {
            return {
                isShow:false
            }
        }
    }

    let app = new Vue({
        el:"#app",
        data: {
            isShow:true
        }
    })
</script>

说明：这里的组件能正常显示出来，说明使用

了解本专栏