vue.js之插槽v-slot

我在人间贩卖青春

已于 2022-02-11 16:01:22 修改

阅读量394

点赞数

分类专栏： vue.js 文章标签： vue.js 前端 javascript

于 2021-11-14 11:00:53 首次发布

本文链接：https://blog.csdn.net/weixin_44178305/article/details/121315009

版权

vue.js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

插槽

父组件在引用子组件时希望向子组价传递模板内容；
子组件让父组件传过来的模板内容在所在的位置显示；
子组件中的就是一个槽，可以接收父组件传过来的模板内容，元素自身将被替换；
用户可以拓展组件，去更好地复用组件和对其做定制化处理。

基础插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        Vue.component("ComponentA", {
            methods: {
            },
            data() {
                return {
                };
            },
            template: `<div>ComponentA
        组件：
        <p><slot></slot></p>
        </div>`,
        });
        app = new Vue({
            el: `#app`,
            template: `
        <div>{{msg}}
            <ComponentA>
               main
            </ComponentA>
        </div>`,
            data: {
                msg: "hello world",
            },
        });
    </script>
</body>
</html>

以上代码中子组件插槽位置会接收到组组件的main字段，如果子组件里不写插槽，那么会父组件写的模板内容会被吞没。

具名插槽

子组件

<div>ComponentA
        组件：{{count}}
        <p><slot name="header" ></slot></p>   // header-spot
        <p><slot></slot></p>   // main
        <p><slot name="footer"></slot></p>    // footer-spot
</div>

父组件

 <ComponentA>
      <template v-slot:header="data">header-spot</template> 
          main
     <template v-slot:footer>footer-spot</template>   
</ComponentA>

作用域插槽

子组件插槽绑定data的变量，父组件中会动态获取到该变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        Vue.component("ComponentA", {
            methods: {
                handleClick() {
                    this.count++;
                },
            },
            data() {
                return {
                    count: 0,
                };
            },
            template: `<div>ComponentA
        组件：{{count}}
        <p><slot name="header" :count="count"></slot></p>
        <button @click="handleClick">click</button>
        </div>`,
        });

        app = new Vue({
            el: `#app`,
            template: `
        <div>{{msg}}
            <ComponentA>
               <template v-slot:header="data"> 插槽：{{data.count}}</template> 
            </ComponentA>
        </div>`,
            data: {
                msg: "hello world",
            },
        });
    </script>
</body>
</html>

Vue.component("TodoList", {
        props:["list"],
        methods: {
          handleClick() {
           this.count++;
          },
        },
        data() {
          return {
            count: 0,
          };
        },
        template: `<div>
          <ul>
            <li v-for="item in list">
              <slot :item="item"></slot>
            </li>
           
            </ul>
        </div>`,
      });
      app = new Vue({
        el: `#app`,
        template: `
        <div>{{msg}}
            <TodoList :list="list">
               <template v-slot="{item}">
               <span v-if="item.age == 18">*</span>
                {{item.name}} -- {{item.age}}
               </template>
            </TodoList>
        </div>`,
        data: {
          msg: "hello world",
          list:[{
            name:"xiaochen",
            age:18
          },{
            name:"xiaohei",
            age:90
          }]
        },
      });

插槽缩写

 v-slot:header

可以写为：

#header

我在人间贩卖青春

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js之插槽v-slot

插槽父组件在引用子组件时希望向子组价传递模板内容；子组件让父组件传过来的模板内容在所在的位置显示；子组件中的就是一个槽，可以接收父组件传过来的模板内容，元素自身将被替换；用户可以拓展组件，去更好地复用组件和对其做定制化处理。基础插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="
复制链接

扫一扫

专栏目录