美文网首页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 作用域插槽(插槽赋值)

    使用vue开发时,组件插槽slot是我们经常使用的特性之一,有时我们插槽中的自定义内容需要使用组件中的数据,这时就...

  • Vue之深入理解插槽—slot, slot-scope, v-s

    Vue 2.6.0 以前Vue 2.6.0 以后具名插槽 slot具名插槽 v-slot作用域插槽 slot-sc...

  • 18、Vue3 作用域插槽

    作用域插槽:让插槽内容能够访问子组件中,vue2中作用域插槽使用slot-scope,vue3中使用v-slot ...

  • vue----slot插槽

    插槽分类 匿名插槽 具名插槽 作用域插槽

  • 2.插槽

    匿名插槽 具名插槽 作用域插槽

  • vue 插槽

    插槽语法是Vue实现的内容分发API,用于复合组件开发。 匿名插槽 具名插槽 作用域插槽 将内容分发到子组件指定位置

  • vue3中的插槽

    插槽 默认插槽 具名插槽,v-slot可以简写为# 动态插槽 #[dynamicSlotName] 作用域插槽(...

  • slot 用法以及使用场景

    Vue的插槽slot,分为3种 匿名插槽 具名插槽 作用域插槽 前两种很好理解,无非就是子组件里定义一个slot占...

  • vue中slot插槽的使用

    插槽的种类:1、默认插槽、具名插槽、作用域插槽、解构插槽、动态插槽几种。转原文:https://www.jians...

  • vue插槽slot

    -具名插槽 子组件Demo.vue 引用子组件的页面 -作用域插槽 子组件Demo.vue 引用子组件的页面

网友评论

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

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