谈下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>

 

转载于:https://www.cnblogs.com/lyz1991/p/11454312.html