zoukankan      html  css  js  c++  java
  • 谈下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>
  • 相关阅读:
    cf 427D Match & Catch 后缀数组
    cf 244c Checkposts 强连通分量
    NSPredicate的学习
    正则表达式
    NavigationBar &UINavigationItem& toolbar方法汇总
    区块股票数量
    吃什么
    selenium
    laravel5
    vim golang dev
  • 原文地址:https://www.cnblogs.com/lyz1991/p/11454312.html
Copyright © 2011-2022 走看看