组件插槽
插槽也是组件之间传值的一种方式
含义:子组件上位,父组件给位置上放上具体的数据
也就是说,插槽其实就是父组件给子组件传递数据的一种方式,这里所说的插槽指的是匿名插槽和具名插槽
匿名插槽 - 没有名字的插槽
1. 子组件中使用slot标签占位
2. 父组件给子组件的自定义标签中放入数据
子组件在自己的模板中,使用slot标签进行占位,父组件给子组件那个自定义标签中加入内容,自动会解析在slot标签内部
具名插槽 - 有名字的插槽
在子组件中只有一个站占好的位置,那父组件存放数据时,就没必要知道插槽的名字,因为只有一个,如果子组件有多个占位,当父组件放入数据时,就要知道每个位置叫什么名字,方便数据和插槽相对应。
使用步骤:
1. 子组件中占位的slot标签需要添加name属性,值为插槽的名字
2. 父组件放数据的时候,给标签添加slot属性,值为插槽的名字
作用域插槽
含义:父组件对子组件的值进行加工处理
作用域插槽不是父传子,而是子传父。通常是子组件将数据传给父组件,父组件接收到数据做处理
使用步骤:
1. 子组件的模板template中,使用slot标签,在标签上通过一个自定义属性,将数据作为属性的值
2. 在父组件的视图中,子组件对应的自定义标签中国,添加一个标签,使用slot-scope属性接收所有子组件绑定的数据,因为这个属性在子组件的自定义标签上,所以父组件的方法中是可以操作到这个数据的