VUE作用域插槽详解(<slot>、v | 您所在的位置:网站首页 › 组件中使用插槽 › VUE作用域插槽详解(<slot>、v |
什么是插槽?
插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制 如下代码: 在子组件中放一个占位符![]() ![]() ![]() 现在来看看,如果子组件中没有放插槽,同样的父组件中在子组件中填充内容,会是啥样的: 子组件代码无插槽:
插槽的最最简单使用,上面已有例子,这里就不写了,接下来看看,插槽其他使用场景。 插槽的使用 - 具名插槽描述:具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。 如下代码: 子组件的代码,设置了两个插槽(header和footer):![]() ![]() ![]() ![]() ![]() 描述: 默认插槽就是指没有名字的插槽,子组件未定义的名字的插槽,父级将会把 未指定插槽的填充的内容填充到默认插槽中。 示例代码如下: 1.子组件代码定义了一个默认插槽: 1. 父级的填充内容如果指定到子组件的没有对应名字插槽,那么该内容不会被填充到默认插槽中。即具名插槽用name属性来表示插槽的名字,不传为默认插槽 2. 如果子组件没有默认插槽,而父级的填充内容指定到默认插槽中,那么该内容就不会填充到子组件的任何一个插槽中。 3. 如果子组件有多个默认插槽,而父组件所有指定到默认插槽的填充内容,将会且全都填充到子组件的每个默认插槽中。 插槽的使用 - 作用域插槽作用域插槽的概念和使用比较难于理解,通过查看多方资料,做了以下的总结: 描述:作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。 使用方法: 1.子组件存放一个带数据的插槽,代码如下: 这里是子组件 export default { data: function(){ return { data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba'] } } }2.父组件通过 “slot-scope” 来接收子组件传过来的插槽数据,再根据插槽数据来填充插槽的内容 这里是父组件 {{item}} {{item}} {{user.data}} 我就是模板3.展现的效果: 4.常用场景(以下为常用的情况之一) 如果子组件中的某一部分的数据,每个父组件都会有自己的一套对该数据的不同的呈现方式,这时就需要用到作用域插槽。 再来个例子加深印象 slot的用法可以分为三类,分别是默认插槽、具名插槽、作用域插槽子组件中: 插槽用 标签来确定渲染的位置,里面放如果父组件没传内容时的后备内容具名插槽用name属性来表示插槽的名字,不传为默认插槽作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件slot-scope接收的对象上 //Child.vue //默认插槽 //slot内为后备内容 没传内容 //具名插槽 没传header插槽 //作用域插槽 没传footer插槽 div{ border:1px solid #000; } 父组件在使用时: 默认插槽的话直接在子组件的标签内写入内容即可具名插槽是在默认插槽的基础上加上slot属性,值为子组件插槽name属性值作用域插槽则是通过slot-scope获取子组件的信息,在内容中使用。这里可以用解构语法去直接获取想要的属性 // Parent.vue 默认插槽 具名插槽header {{slotProps.testProps}}渲染结果为 在vue2.6中。上述的API被软废弃(3.0正式废弃),取而代之的是内置指令v-slot,可以缩写为【#】 子组件用法保持不变,父组件中 slot属性弃用,具名插槽通过指令参数v-slot:插槽名的形式传入,可以简化为#插槽名slot-scope属性弃用,作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性v-slot属性只能在template上使用,但在只有默认插槽时可以在组件标签上使用 //Parent 默认插槽 具名插槽 {{slotProps.testProps}} 拓展用法: 同样可以通过解构获取v-slot={user},还可以重命名v-slot="{user:newName}"和定义默认值v-slot="{user = '默认值'}"插槽名可以是动态变化的v-slot:[slotName] 注意1.默认插槽名为default,可以省略default直接写v-slot,缩写为#时不能不写参数,写成#default(这点所有指令都一样,v-bind、v-on) 2.多个插槽混用时,v-slot不能省略default 作用域插槽的原理slot本质上是返回VNode的函数,一般情况下,Vue中的组件要渲染到页面上需要经过template>>render function >> NVode >> DOM过程。组件挂载的本质就是执行渲染函数得到VNode,至于data/props/computed这些属性都是给VNode提供数据来源 在2.5之前,如果是普通插槽就直接是VNode的形式了,而如果是作用域插槽,由于子组件需要再父组件访问子组件的数据,所以父组件下是一个未执行的函数(slotScopre) => return h('div',slotScope.msg),接受子组件的slotProps参数,在子组件渲染实例时会调用该函数传入数据。 在2.6之后,两者合并,普通插槽也变成一个函数,只是不接受参数了 因为第二篇文章有些新的可取之处,所以又整合了这篇文章加深理解,原文链接:https://blog.csdn.net/H_c_l/article/details/100151287 |
CopyRight 2018-2019 实验室设备网 版权所有 |