VUE

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

2021-03-30  本文已影响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 起被废弃

作用域插槽

上一篇 下一篇

猜你喜欢

热点阅读