Vue插槽slot

一、概念解析

插槽slot:插槽有点像组件中的一个占位符,当别的组件使用这个组件的时候,在这一对标签中又写了其他内容,就通过插槽渲染进这个组件
具名slot:用属性name标识的插槽,可以根据不同的名字匹配分发内容
作用域slot:用于接收子组件传递过来的数据。通常父组件在分发内容时,引用的是自己组件的数据。如果想要使用子组件的数据,就通过作用域插槽。

二、例子

1. 单个插槽

step1. 子组件内部定义slot标签占位
step2. 父组件使用子组件时分发内容,渲染到slot

//假定组件my-component有如下模板
//在父组件中的使用方法

我就是slot的替代内容,这里可以放任何标签元素,即使是一长串ul>li列表

2. 具名插槽
step1. 子组件内部定义slot标签占位,并且给不同的slot,命名
step2. 父组件使用子组件时分发内容,在分发内容处指明要渲染的slot的名字

//假定组件my-component有如下模板
//在父组件的模板中使用方法

我就是这个叫header的slot替代内容,这里可以放任何标签,只要标签加了slot="header"就会渲染

我就是这个叫footer的slot替代内容

3. 作用域插槽
step1. 子组件内部定义slot标签占位,在slot标签里自定义属性传值
step2. 父组件分发内容时定义slot-scope属性,它的值是临时变量,通过这个临时变量引用子组件slot的传值属性

//假设子组件的模板有如下内容
//父组件在模板中使用子组件的text的值 ```html
{{props.text}} //会把hello world渲染出来

你可能感兴趣的:(Vue插槽slot)