vue插槽

什么是插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力 ，vue插槽一般有以下几种使用方式 ，分别是 具名插槽和默认插槽 ，以及作用域插槽

为什么使用插槽

1.首先要明白插槽是使用在子组件中的

 

 

2、插槽是为了将父组件中的子组件模板数据正常显示

 

具名插槽的使用

 

 

具名插槽其实就是给插槽取个名字。

 

毕竟默认插槽只能显示一个 ，但是一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中这就是具名插槽

默认插槽的使用

 

默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父组件将会把 未指定名字的插槽填充的内容填充到默认插槽中。

作用域插槽的用法

作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用

父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

 

 

效果：

 

 

 

 

 

 

 

标签：vue,填充,作用域,插槽,具名,默认,组件
来源： https://www.cnblogs.com/slx0125/p/16265159.html