vue卡槽

最新推荐文章于 2023-05-24 22:17:29 发布

郭治涛-Theo

最新推荐文章于 2023-05-24 22:17:29 发布

阅读量276

点赞数 1

分类专栏：笔记文章标签： vue slot 卡槽

本文链接：https://blog.csdn.net/qq_44698161/article/details/102918956

版权

笔记专栏收录该内容

48 篇文章 1 订阅

订阅专栏

卡。。。槽。。。

全局组件的自定义标签不能使用大写可以使用“-”连接
template 的内容中必须包含标签名并且template 的内容会完全替代自定义标签（包括标签自己）
写卡槽的方法
推荐直接github查看，还能锻炼英语
另外看到一个写得黑详细的博主：
Vue中插槽slot的使用

// 先在这里挖个坑
<slot name ="example"/>

// 咱们在这填坑
<template v-slot:example>
   <div>这是填的内容</div>
</template>

咱可以这么看

slot 是一个没有水的游泳池
template 是向泳池里注水的水管
v-slot:exp 是引导水管去到那个名字为exp的游泳池
由template 包起来的如此处<div>这是填的内容</div>就相当于水管里的水

来个简单的
这个html简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件和插槽</title>
</head>
<body>
    <div class="box">
        <div>这是第一个div</div>  
    </div>
</body>
</html>

js代码

// 局部组件
    let clickconp2 = {
    	// 数据（这里必须是function类型） 
        data:function(){
            return {
                count:0
            }
        },
        // 方法 点击之后count+1
        methods:{
            clickCount(){
                this.count++
            }
        },
        // 模板
        template:`<div>
                    <button @click="clickCount">点了{{count}}次</button>
                    <slot name ="more"/>
                    <p> 这是卡口</p>
                  </div>`         
    }

    //  新建一个vue实例
    let ve = new Vue({
    	// 挂载节点
        el:'.box',
        // 注册clickconp2组件 自定义标签名为clickconp2
        components:{
            "clickconp2":clickconp2
        },
        /*
        * 通过自定仪标签将clickconp2组件内容写入页面
        * 再将 <div>这是插如</div> 写到 clickconp2 中button 和 p 标签中间
        */
        template:`<div>
                    <clickconp2>
                        <template v-slot:more>
                            <div>这是插如</div>
                        </template>
                    </clickconp2>
                  </div>`
    })

结果
在这里插入图片描述

郭治涛-Theo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue卡槽

卡。。。槽。。。全局组件的自定义标签不能使用大写可以使用“-”连接template 的内容中必须包含标签名并且template 的内容会完全替代自定义标签（包括标签自己）写卡槽的方法推荐直接github查看，还能锻炼英语// 先在这里挖个坑<slot name ="example"/>// 咱们在这填坑<template v-slot:example>...
复制链接

扫一扫