美文网首页VUE
vue 作用域插槽(插槽赋值)

vue 作用域插槽(插槽赋值)

作者: 山上有桃子 | 来源:发表于2021-03-30 15:26 被阅读0次

    使用vue开发时,组件插槽slot是我们经常使用的特性之一,有时我们插槽中的自定义内容需要使用组件中的数据,这时就需要使用到作用域插槽。
    其中,根据vue的版本不同,选择也有所不同
    一、vue 2.6.0 之前
      在 <template> 上使用特殊的 slot-scope attribute
    二、vue 2.6.0 及之后
       <tempalte v-slot:<slotName>="<slotPropsName>" ></template>

    // components my-test.vue
    <template>
      <slot name="table" v-bind="{height}"></slot>
    </template>
    <script>
      export default {
        name: 'myText',
        data(){
          return {
            height:0,
          }
        },
      }
    </script>
    
    // page test.vue
    <my-test>
        <template v-slot:default="row">
            {{row.height}}
        </template>
    </my-text>
    <script>
      export default {
        name: 'test',
      }
    </script>
    

    带有 slot-scope attribute 的作用域插槽(自 2.6.0 起被废弃

    作用域插槽

    相关文章

      网友评论

        本文标题:vue 作用域插槽(插槽赋值)

        本文链接:https://www.haomeiwen.com/subject/cplrwktx.html