目录1、为什么使用slot 1.1 slot(插槽)1.2 组件中的插槽1.3 例子2、如何封装这类组件(slot)3、 插槽的案例4、插槽默认值5、具名插槽6、编译作用域7、作用域
USB
我们可以插入U盘,手机,鼠标,键盘等等
<div id="app">
<cpn><button>按钮</button></cpn>
<cpn><p>hello world</p></cpn>
<cpn><p>666</p></cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
// 插槽预留的位置,方便使用者自己填写
<slot></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
components: {
"cpn": {
template: `#cpn`,
}
}
})
</script>
上述代码干了以下事情:
cpn
,然后在子组件中预留了一个插槽,插槽的内容由用户填写最后展示效果如下:
如果我们需要大量使用这个组件,而且组件预留的插槽,我们大多数都是填写的返回按钮,只有极少数填写其他的,那么这种情况就可以为插槽设置一个默认值
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<slot><button>返回</button></slot>
</div>
</template>
我们在子组件中设置了一个默认值为返回按钮的插槽,那么父组件在使用时如果不填写任何内容,那么默认就是返回按钮
有时我们需要多个插槽。例如对于一个带有如下模板的组件:
<template id="cpn">
<div>
<slot name="header"><span>头部</span></slot>
<slot name="main"><span>中间</span></slot>
<slot name="footer"><span>页脚</span></slot>
</div>
</template>
我们在组件中预留了3个插槽,但是这里指定了3个名字,后续父组件使用v-slot
指定name
属性后就能填写自己的内容,比如如下代码
<div id="app">
<cpn>
<template v-slot:header>
<p>header头部</p>
</template>
<template v-slot:footer>
<p>footer页脚</p>
</template>
</cpn>
</div>
使用了cpn
组件,然后指定了插槽name
属性为header
和footer
的内容,指定后自己填写的内容就会替换默认的内容。
注意:这里的语法格式是固定的,必须在使用template标签上绑定v-slot:插槽的名字
通过外面传给组件的变量,在以后使用插槽的时候是不能使用的
<div id="app">
<cpn v-show="isshow"></cpn>
</div>
<template id="cpn">
<p>hello</p>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isShow: true
},
components: {
"cpn": {
template: `#cpn`,
data(){
return{
isShow: false
}
}
}
}
})
</script>
上面我们定义了子组件cpn
,子组件中有属性isShow
,app
实例中也定义了属性isShow
,最后使用子组件cpn
时使用了v-show
,当值为true
显示,值为false
不显示
问题:v-show
中的isShow
的值是实例中的true还是子组件中的false
答案:是true,因为你使用的时候是在app实例范围内,所以isShow
会去从实例中的data
去查找,虽然你是在cpn
子组件中绑定的,但是这里的cpn你只需要把他当做普通的标签即可,如果你想让isShow
的值为false
,那么你只需要在子组件的template
模板中使用<p v-show="isShow">hello</p>
默认在插槽中的代码只能使用全局Vue
中的属性,如果想要使用自定义组件中的属性,那么需要在定义slot
的时候使用v-bind
来进行绑定。
<div id="app">
<cpn>
<template v-slot:default="slot">
{{slot.data.firstName}}
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="user">
{{user.lastname}}
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
components: {
"cpn": {
template: `#cpn`,
data(){
return{
"user": {
"firstName": "甲",
"lastname": "壳虫"
}
}
}
}
}
})
</script>
上述代码做了如下几件事情:
user
data
,且插槽的默认值为user.lastname
html
中使用了子组件,并使用v-slot
绑定了插槽Prop
对象,这样就可以通过对象名称.子组件中绑定的属性名称(slot.data
),来访问子组件中的数据到此这篇关于Vue slot插槽的使用详情的文章就介绍到这了,更多相关Vue slot插槽的使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue slot插槽的使用详情
本文链接: https://www.lsjlt.com/news/155597.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0