谈下slot-scope
Vue里有个slot插槽的概念,常用的一般是命名的slot和默认的slot,
这里谈下slot-scope,Vue2.6后改成v-slot
slot-scope场景是父组件用子组件的数据,但是样式自己的,如果父组件不写,就默认自己的
代码如下,子组件:
<div> <slot :data="name"> <p>默认的: {{ name }}</p> </slot> </div>
这里注意,:data相当于子组件传递给父组件的数据
父组件的使用如下
<v-child> <template slot-scope="data"> <p>父级样式:{{ data.data }}</p> </template> </v-child>
这里slot-scope相当于接收子组件传递过来数据,这里数据结构是:{子组件的:data: 子组件数据},所以需要data,(如果子组件是:user,那么父组件是.user)
注:一旦使用slot-scope后,子组件内其他scope都变成slot-scope
下面是2.6.0以上版本
写法, 子组件不变,父组件变为
<v-child v-slot="data"> <p>父级样式:{{ data.user }}</p> </v-child>