Vue2.6+ 插槽新语法


插槽一共就三大类

1.匿名插槽(也叫默认插槽): 没有命名,有且只有一个
2.具名插槽: 相对匿名插槽组件slot标签带name命名的
3.作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)
插槽老的写法已经走在废弃的路上了

匿名插槽

直接上代码
父页面

<div id="father">
<h1>爹</h1>
<son>
<template v-slot:default>
<p>我会插所有没有名字的插槽</p>
</template>
</son>
</div>

子页面

<template id="son">
<div>
<h1>儿子</h1>
<slot></slot>
</div>
</template>

看一下页面效果
Vue2.6+ 插槽新语法

具名插槽

  <div id="father">
<h1>爹</h1>
<son>
<template v-slot:bottom>
<p>我是下面的白熊</p>
</template>
<template v-slot:top>
<p>我是上面的棕熊</p>
</template>
<template v-slot:center>
<p>我是中间的熊猫</p>
</template>
</son>
</div>

<template id="son">
<div>
<h1>儿子</h1>
<slot name='top'></slot>
<slot name='center'></slot>
<slot name='bottom'></slot>
</div>
</template>

语法糖

<div id="father">
<h1>{{ name }}</h1>
<son>
<template #bottom>
<p>我是下面的白熊</p>
</template>
<template #top>
<p>我是上面的棕熊</p>
</template>
<template #center>
<p>我是中间的熊猫</p>
</template>
</son>
</div>

Vue2.6+ 插槽新语法

插槽的动态命名

语法

<template v-slot:{动态插槽名}>
//。。。内容
</template>

作用域插槽

父页面

<div id='father'>
<h1>爹</h1>
<son>
<template #child='sonData'>
{{ sonData.onedata.name }}
</template>
</son>
</div>

#child其实是v-slot:child的语法糖写法
child要和子组件插槽的name属性一致
sonData子组件传过来的所有数据的集合
.onedata是在子组件上准备传数据是自定义的一个名字
.nameonedata里的一个属性

子页面

<template id='son'>
<div>
<h1>儿子</h1>
<slot name='child' :onedata='one' :twodata='two'></slot>
</div>
</template>

onedata=‘one’里的onedata是给传过去的属性一个自定义名称
one是子组件里的数据名
可以用绑定的方式传入多个数据,例如:twodata=‘two’

js代码

const son = {
template: '#son',
data() {
return {
one: {
name: '蝎子',
age: '莱莱'
},
two:[1,23,435,5876]
}
}
}

const father = new Vue({
el: '#father',
components: { son }
})

看一下打印到页面上的效果
Vue2.6+ 插槽新语法

父页面还可以这么写(解构插槽)

<div id='father'>
<h1>爹</h1>
<son>
<template #child='{ onedata,twodata }'>
{{ onedata.name }}
</template>
</son>
</div>

这是由于

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里:

function (sonData) {
// 插槽内容
}

(sonData)=>参数可以用slot标签上现有的值({onedata,twodata})替换

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Vue2.6+ 插槽新语法

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Vue2.6+ 插槽新语法
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏