插槽用于内容分发,存在于子组件之中。
父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪。
子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据。
<slot></slot> 或 <slot name="名称">默认值</slot>
1:如果定义了slot插槽元素,那么子组件之间的内容将会被插入到插槽元素之中。(可简单理解为向插槽提供内容)
2:如果定义了slot插槽元素,并没有在子组件之间插入内容,那么将使用默认值。(不提供内容,将使用默认值)
3:如果没有定义slot元素,那么子组件之间的内容将会被废弃。
// 定义组件
vue.component("my-test",{
template:`<div><slot>默认值</slot></div>`
})
// 向插槽提供内空
<my-test>hello slot</my-test>
当子组件中有多个插槽元素时,要为每个插槽name特性定义名称。
1:如果没有定义名称,那么采用默认名称:default;用于存放不指定名称的内容
2:如果多个插槽没有定义名称或名称相同的情况下,那么v-slot(# 缩写)指令将无法找到对应插槽或混乱。
3:多个插槽时v-slot指令配合template一起使用,如果只有单个可直接写到子组件上。
// 定义插槽
Vue.component("my-test",{
template:`
<div>
<div><slot name="name">标题</slot></div>
<div><slot>内容</slot></div>
<div><slot name="qita">其它</slot></div>
</div>
`
});
<!-- 向插槽提供数据 -->
<div>
<my-test>
<template v-slot:name>
<h4>vuejs</h4>
</template>
<p>v-slot、slot元素</p>
<p>template</p>
<template v-slot:qita>
<p>恩</p>
</template>
</my-test>
</div>
父组件在向子组件的插槽提供内容的时候,有时需要访问子组件中的数据,那么可以利用v-bind指令在插槽上绑定变量来实现。
字面量写法:
v-slot:default="自定义名称"
解构写法 : 与ES6中解构对象写法一样。
v-slot:default="{data = {name:"whowhowho"}}"
变量重命名
v-slot:default="{data : ddd}"
Vue.component("my-test",{
template:`<div class="main"><slot :data="user">内容</slot></div>`,
data(){
return {
user:{
name:'小明',
age:'110'
}
}
}
});
<div class="app">
<my-test>
<template v-slot="o">
{{o.data.name}}、{{o.data.age}}
</template>
</my-test>
<my-test>
<template v-slot:default="{data}">
{{data.name}}、{{data.age}}
</template>
</my-test>
<my-test>
<template v-slot:default="{data:dd}">
{{dd.name}}、{{dd.age}}
</template>
</my-test>
</div>
与ES6中动态属性名写法一样。 v-slot:[....]
props是用来接收参数的 例如父组件向子组件传参 可以放在props中;插槽 slot分发模式主要用于在组件中插入标签或者组件之间的相互嵌套,个人认为如果组件中有需要单独定义的地方可以使用slot
vue 为我们提供了很多复用性的方式,slot 和 mixins 就是其中两种...下面对这两种方式做一下记录,插槽使用场景- 该组件被多个地方使用- 每个父组件中对该组件的内部有一部分需要特殊定制
最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性。 真正有能力的插槽是什么?
vue将 <slot> 元素作为承载分发内容的出口,当组件渲染的时候,<slot></slot> 将会被替换该组件起始标签和结束标签之间的任何内容
Vue 代码中的 slot 是什么,简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。看了上面这句官方解释,可能一样不知道 slot 指的是什么
首先来思考一个问题:是否有一种方法可以从子组件填充父组件的插槽?最近一位同事问我这个问题,答案很简单:可以的。但我的解决方案可能和你想的完全不一样,这是涉及一个棘手的Vue架构问题
Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!