vue-slot插槽

最新推荐文章于 2024-07-22 10:50:59 发布

@Tiramisu

最新推荐文章于 2024-07-22 10:50:59 发布

阅读量64

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105032037

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

*混合父组件的内容与子组件自己的模板–>内容分发
*父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

a. 单个slot

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
</head>
<body>
    <div id="box">
        <!-- <button @click="isShow=!isShow">click</button> -->
        <navbar>
            <button @click="isShow=!isShow">navbar-button</button>
        </navbar>
        <sidebar v-show="isShow"></sidebar>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        //子组件

        Vue.component("navbar", {
            template: `<div>
            navbar
            <slot></slot>
          </div>`,
        })

        Vue.component("sidebar", {
            template: `<div style="background:yellow;width:200px;">
            <ul>
              <li>11111</li>  
              <li>11111</li>  
              <li>11111</li>  
            </ul>  
          </div>`
        })

        new Vue({
            el: "#box",
            data: {
                isShow: false
            }
        })
    </script>
</body>
</html>

b. 具名slot

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
</head>
<body>
    <div id="box">
        <child>
            <div slot="a">aaaaaaaaaaaa</div>
            <div slot="b">bbbbbbbbbbbb</div>
        </child>

        <swiper>
            <li v-for="data in datalist">
                {{data}}
            </li>
        </swiper>
   </div>

    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">

        Vue.component("child", {
            template: `<div>
          <slot name="a"></slot>
            child
          <slot name="b"></slot>  
          </div>`
        })

        Vue.component("swiper", {
            template: `<div>
            <ul>
              <slot></slot>    <!--预留插槽-->
            </ul>
          </div>`
        })

        new Vue({
            el: "#box",
            data: {
                datalist: ["11111", "22222", "333333"]
            }
        })
    </script>
</body>
</html>