vue.js之插槽（v-slot）（一）

2021-11-14 11:03:05 阅读：164 来源： 互联网

标签：slot count vue ComponentA 插槽 app js 组件 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: {
            },
            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>

插槽缩写

 v-slot:header

可以写为：

#header

标签：slot,count,vue,ComponentA,插槽,app,js,组件,data
来源： https://blog.csdn.net/weixin_44178305/article/details/121315009

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue.js之插槽（v-slot）（一）

插槽

基础插槽

具名插槽

作用域插槽

插槽缩写