我是跟着官方学的,官方文章挺好的,强烈建议看[官方]的
https://cn.vuejs.org/v2/guide/components-slots.html
你好奇看看也行,要是你评论的话,我会害羞的(????)
我的语文很烂,你忍一下 (无E烦梗)
插槽
插槽:<slot></slot>
Vue自带的内置组件<slot>
插槽是被应用在 template(组件模板)内的
就像把一个外部的东西,插入内部一样
比如:以前的游戏机,需要插卡,卡就是已经写好的游戏,只需要插入对应的插槽就可以玩了
??插槽只有一个,但卡可以有很多种,一个插槽只能插一张卡,插入的卡不同 玩的游戏也不同
例如:
--html部分--
<div id="A" >
<abc>
<h1>我会被插入{{a}}</h1>
<p>我也会被插入</p>
我tm也会被插入!
<组件></组件>
</abc>
</div>
--vue组件部分--
Vue.component('abc', {
template:`<div>
<slot>
<p>我会被覆盖</p> //如果<abc></abc>中出现内容,那么它会被覆盖,温馨提示:看不见的不算内容哦~,比如\t和空格
//无插入则不会消失,也就是有一个默认内容
</slot>
</div>`
});
new Vue({
el:"#A",
data:{
a:"插槽的作用域在我这边,而非abc组件那边"
}
});
作用域如果不太理解的话,看看官方的这些话
? 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的.
? 组件的作用域都是独立的
具名插槽
顾名思义,带名字的插槽,上面是默认插槽,默认插槽会隐式的存在name="default"属性,default(默认)
我们也可以说<abc>隐式模板</abc>中隐式存在一个模板,模板上有v-slot:default属性 (我猜的,嘿嘿,不过挺符合逻辑的)
<slot> 元素有一个特殊的属性: name
加上name后的插槽 必须被 指定的模板插入
如何指定模板?只需要在模板上加上v-slot指令就好了
例如:
--Vue abc组件 模板部分--
<div>
<slot name="default" >
<p>我会被覆盖</p>
</slot>
</div>
--html部分--
<div id="A" >
<abc>我有一个隐式模板,模板有v-slot:default属性</abc>
<abc><template >我隐式存在v-slot:default属性</template></abc>
<abc><template v-slot:default>别不信呐~亲~,我真的有</template></abc>
<abc><template v-slot:wc>
换个名字,我就没了~,我不会出现,因为没有name="wc"的插槽
</template></abc></div>
最终html是:
<div id="A" >
<div>我有一个隐式模板,模板有v-slot:default属性</div>
<div>我隐式存在v-slot:default属性</div>
<div>别不信呐~亲~,我真的有</div>
<div><p>我会被覆盖</p></div>
</div>
注意 v-slot 只能添加在 <template> 上 ,只有一种[例外情况]
[例外情况] https://cn.vuejs.org/v2/guide/components-slots.html#%E7%8B%AC%E5%8D%A0%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD%E7%9A%84%E7%BC%A9%E5%86%99%E8%AF%AD%E6%B3%95
作用域插槽(prop道具反转)
prop <=翻译=> 道具
正常是 父组件 传递给 子组件 prop ,例如:
<组件 道具="字符串" :动态道具="变量"> </组件>
现在这个是 子组件 传递给 父组件 prop
如何传递呢?和 父传递给子 一样,例如:
<slot name="插槽名" 道具="字符串" :动态道具="变量"> </slot>
那如何使用 prop(道具)呢?
只需要在模板中 声明道具对象
例如:
<template v-slot:插槽名="道具对象" >
<p>{{道具对象.*}}</p>
</template>
道具对象的名字无所谓,道具对象是根据插槽名决定的
独占默认插槽的缩写语法
你只用一个(独占)插槽的话,可以直接把v-slot写在组件上面
你用的插槽是默认的话(插槽名=“default”),可以不用写
例如 独占默认插槽:<组件 v-slot="道具对象"> </组件>
只要出现多个插槽，请始终为所有的插槽使用完整的基于<template>的语法
??<组件><template v-slot:插槽名="道具对象"></template></组件>
解构插槽 prop(道具)
推荐看官网!
https://cn.vuejs.org/v2/guide/components-slots.html#%E8%A7%A3%E6%9E%84%E6%8F%92%E6%A7%BD-Prop
反正我是没有看懂这句话:作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里
不过功能会用
指定插槽道具
v-slot:插槽名 = “{ 道具名1 , … }”
指定插槽道具 之 重命名
重名后,旧名不可在用
v-slot:插槽名 = “{ 道具名1 : 新名1 , … }”
指定插槽道具 之 后备内容
若道具名存在 , 则后备内容 不复存在
v-slot:插槽名 = “{ 道具名1 = 后备内容 , … }”
后备内容 是啥都行,对象,数组,基础类型,甚至是 函数
不过还是不要是 函数 的好,除非 插槽道具 也是函数
如果存在道具,那么不会吊 后备内容,可以通过这个机制来这样写:
<组件 v-slot="{ 闪光弹数量 : 数量 = (()=>{
console.log('这个组件没有 闪光弹数量 prop(道具),默认给 1 个');
return 1;
})()
}">
<p>当前闪光弹数量:{{ 数量 }}<p>
</组件>
如果存在 闪光弹数量 ,那么这个函数不会运行 , 不存在则相反
上面是 重命名 和 后备内容 结合语法,顺便写出来
动态插槽名
其实就是 动态属性 , 我想你应该已经会动态属性了
v-slot:[动态插槽名] = “插槽道具”
缩写
v-slot缩写:#
如果你要用缩写,那么你必须 声明 插槽名
#="插槽道具" //不行哦~,没有 插槽名
#default="插槽道具" //可以的👍
提示
可以写多个一样的插槽 , 但是别写 多个一样的模板
多个一样的插槽 都会被 一个模板 所应用
但 多个一样的模板 ,插槽也不知道该应用那个模板啊
一样 指的是 插槽名 一样
(猜的)所以它会全部应用 , 最后被最后一个模板覆盖,所以最后被加载的模板才会被插槽应用
例如:
<组件>
<template #aa>我不是最终被应用的</template>
<template #aa>我是最终被应用的</template>
</组件>
不管猜的是不是对的,总而言之 不要这样写 ,免得出bug后像我一样哭爹喊娘
|