vue中匿名插槽,具名插槽,作用域插槽的区别
面试的时候可能会问你,什么叫做内容分发 说实话这个问题很模糊 想回答的准确点确实有点难一个通俗点的回答就是 父组件的数据和子组件的模板配合起来使用就是内容分发内容分发其实和一个叫做插槽的概念有关 slot关键字这里有三种插槽 我们就来一一讲解1.匿名插槽 又叫做默认插槽 就是没有名字我还是直接上代码 更直接点1.1.在父组件中 子组件引用的中间也有内容 有代......
面试的时候可能会问你,什么叫做内容分发 说实话这个问题很模糊 想回答的准确点确实有点难
一个通俗点的回答就是 父组件的数据和子组件的模板配合起来使用就是内容分发
内容分发其实和一个叫做插槽的概念有关 slot关键字
这里有三种插槽 我们就来一一讲解
1.匿名插槽 又叫做默认插槽 就是没有名字
我还是直接上代码 更直接点
1.1.在父组件中 子组件引用的中间也有内容 有代码 父组件可以决定里面html代码的样式 还有数据内容
<h2>这里是父组件</h2>
<child>
Ï
<div>
<h2>hello</h2>
<h2>vue.js</h2>
</div>
</child>
1.1. 子组件 使用 slot 插槽标签 可以上父组件传来的内容进行展示 至于在哪里展示 由子组件决定
<template>
<div>
<h2>这里是子组件</h2>
<slot ></slot>
</div>
</template>
这是在页面上的显示效果
2.具名插槽 这个和匿名插槽 区别就是这个是由名字 在标签上 加一个slot 属性 起一个自定义的名字
2.1 在父组件
<h2>这里是父组件</h2>
<child>
<div>
<h2>hello</h2>
<h2vue.js</h2>
<h2 slot="react" style="color:#f00">react.js</h2> //我们还给他改变了颜色
</div>
</child>
2.2. 在子组件中 引用的时候 我们 需要在 slot标签上加上 一个 name属性 名字 就是我们在父组件中自定义的那个名字
<template>
<div>
<h2>这里是子组件</h2>
<slot ></slot> // 没有名字的都会被收到这个匿名插槽中间
<slot name="react"></slot>
</div>
</template>
最后也确实 显示 这就是 具名插槽的作用 注意 没有其名字的插槽 都会被 匿名插槽所接收
3.作用域插槽 这下和具名插槽有俩点不同 功能快和具名插槽作用相反了
3.1 是父组件引用子组件中的数据
3.2 使用slot-scope 进行数据的传递
子组件中 将数据传递给父组件
<template>
<div>
<h2>这里是子组件</h2>
<slot :data="data"></slot> // 有点和 props 传递参数有点像是吧
</div>
</template>
data(){
return {
data:['tom','jack','rose','tony','stark']
}
}
在父组件中
<child>
<template slot-scope="user"> // 这里自定义一个变量 我们传的数据会到这个对象下面 使用的时候是 user.data // data就是好我们传过来的数据
<div class="tmp">
<span v-for="item in user.data" :key="item">{{item}}</span>
</div>
</template>
</child>
同时我们在给设置一个弹性布局.
tmp{
display: flex;
justify-content: space-around;
}
最后页面显示效果如下
<child> // 如果我们不用 slot-scope进行接受的话 子组件的作用域插槽 就会变成了 普通的 匿名插槽了
hello world
</child>
好了 到此结束了
分界线 2022.7.14
其实上面的是老版本的vue 关于插槽的知识。在vue2.6.*版本之后。移除了slot-scope 这个用法
具名插槽和作用域插槽 🙆统一使用 v-slot 这个指令
具名插槽的简单用法
// 具名插槽
<child>
<template #title>
<h2>hello new Vue3!</h2>
<template>
</child>
// 在子组件中
<slot name="title"></slot>
// 作用域插槽
子组件中
<slot name="title" :data="data"></slot>
// 父组件
<template v-slot:title="{ data }"> </template>
时间过的好快 一晃 两年过去。我还在做前端 哈哈哈哈。今天来更新下 之前写的文档
更多推荐
所有评论(0)