vue[插槽][一文认识插槽的使用]

在vue组件化开发中，插槽是一个非常关键而且好用的内容，用好他可以帮助我们复用大量的内容，更快速的开发项目。

插槽新语法整理：3个使用点5个注意点

1. v-slot 和 结论：在父组件中引入子组件，然后将内容放置在子组件之间即可将内容插入到子组件的

2. v-slot:xx 指令 和 结论：

3. v-slot:xx = ‘scope’ 指令 和 结论：

注意点：

1. v-slot指令都放置在
2. 没有标记或使用v-slot的内容都默认放置在没有name属性的slot
   标签中
3. 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
   将内容从父组件传递到子组件可以使用 props(数据父传子) 方式传递，需要从子组件获取相关的数据可以使用 作用域插槽
4. 如果子组件中没有 slot 标签，则传递过来的内容将不会渲染。
5. 后备内容即放置在

方式一：v-slot 和

子组件内容：

父组件内容：

结果：

结论1：在父组件中引入子组件，然后将内容放置在子组件之间即可将内容插入到子组件的

方式二：v-slot:xx 指令 和

子组件内容：

父组件内容

结果：

结论2：

注意：

1、v-slot指令都放置在
2、没有标记或使用v-slot的内容都默认放置在没有name属性的


3、父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
将内容从父组件传递到子组件可以使用 props(数据父传子) 方式传递，需要从子组件获取相关的数据可以使用 作用域插槽

4、如果子组件中没有 slot 标签，则传递过来的内容将不会渲染。

后备内容概念

后备内容即放置在


修改为：

作用域插槽 => v-slot:xx = ‘scope’ 指令 和

子组件内容

父级内容：

结果：

结论3：