VUE中的几种插槽

最新推荐文章于 2024-04-02 16:07:42 发布

Cool_so_cool

最新推荐文章于 2024-04-02 16:07:42 发布

阅读量854

点赞数

分类专栏： VUE.JS 文章标签： vue

本文链接：https://blog.csdn.net/Cool_so_cool/article/details/106011176

版权

VUE.JS 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

1.插槽

slot：内置的组件：可以将父组件中的子组件里面的模板数据进行显示只有在子组件中有用
下面一个简单的使用

<body>
    <div id="app">
        <h2>这是父组件</h2>
       <child>
           <div>菜单一</div>
           <div>菜单二</div>
           <div>菜单三</div>
       </child>
    </div>
    <template id="child">
        <div>
            <h2>这是子组件</h2>
            <slot></slot>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        let child={
            data(){
               return {}
            },
            template:"#child"
        }
       let vm=new Vue({
           el:"#app",
           data:{
            },
           components:{
            child
           }
       })
   </script>
</body>

这个是添加插槽之前页面显示的样子
这个是添加插槽之前页面显示的样子
这个是添加插槽之后页面显示的样子
这个是添加插槽之后页面显示的样子

2.具名插槽

slot属性值和子组件中slot插槽中的name属性对应。
没有name属性的slot会解析默认的标签。
子组件的slot组件上的name属性会和父组件中的slot属性进行匹配，并按照子组件的顺序显示对应的模板数据

<body>
    <div id="app">
        <h2>这是父组件</h2>
        <child>
            <!-- // slot属性值和子组件中slot插槽中的name属性对应 -->
            <div slot="first">菜单一</div>
            <div>菜单二</div>
            <div>菜单三</div>
        </child>
    </div>
    <template id="child">
        <div>
            <h2>这是子组件</h2>
            <!-- 没有name属性的slot会解析默认的标签 -->
            <slot></slot>
            <!-- 子组件的slot组件上的name属性会和父组件中的slot属性进行匹配，并按照子组件的顺序显示对应的模板数据 -->
            <slot name="first"></slot>
         </div>
    </template>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let  child = {
            data(){
                return {
                }
            },
            template:"#child"
        }
        let vm = new Vue({
            el:"#app",
            data:{
             },
            components:{
                child
            }
        })
    </script>
</body>

3.作用域插槽

slot-scope:作用域插槽；可以让我们在父组件这个位置取到子组件的数据，通过子组件的行间动态属性传过去

<body>
    <div id="app">
       <h2>这是父组件</h2>
       <child>
           <div slot-scope='abc'>{{abc.msg}}</div>
       </child>
    </div>
    <template id="child">
        <div>
            <h2>这是子组件</h2>
            //通过行间属性传过去
            <slot :msg='msg'></slot>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        let child={
            data(){
               return {
                  msg:'hello'
               }
            },
            template:"#child"
        }
       let vm=new Vue({
           el:"#app",
           data:{
              msg:'world'
            },
           components:{
            child
           }
       })
  </script>
</body>

Cool_so_cool

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VUE中的几种插槽

slot：内置的组件：可以将父组件中的子组件里面的模板数据进行显示只有在子组件中有用下面一个简单的使用<body> <div id="app"> <h2>这是父组件</h2> <child> <div>菜单一</div> <div>菜单二</div> <div>菜单三</
复制链接

扫一扫