Question

我想在默认范围内显示变量。这个版本有效。

<slot>{{namedSlotText}}</slot>

但是当我以其他方式尝试时，变量不会显示。

模板

<div id="app">
  <my-component></my-component>
</div>

代码

let vm = new Vue({
  el:"#app",
  components:{    
    myComponent:{
      template:`
        <div>
         <slot :text="namedSlotText"></slot>
        </div>
      `,
      data:()=>({
        namedSlotText: "This is default slot text"
      })
    }
  }
})

我看到v-text工作的地方。

Answer 1

当您将属性传递给slot时，基本上您正在使数据可用于插槽的内容。该概念称为scoped slots。

此代码

<div>
  <slot :text="namedSlotText"></slot>
</div>

仅使text属性可供插槽内容使用。为了使用该属性，您必须首先定义范围模板，然后在内容中显式引用该属性。

<my-component>
  <template scope="{text}">
    {{text}}
  </template>
</my-component>

Answer 2

避免对数据使用箭头函数，正确的ES2015语法（内部组件）是：

data() {
  return {
    namedSlotText: "This is default slot text"
  }
}

因为您使用的是标准插槽，所以您可以设置默认值：

Vue.component('my-component', {
  template: `<div><slot>{{slotText}}</slot></div>`,
  data() {
    return {
      slotText: "This is default slot text"
    }
  }
})

这是JSFIddle：https://jsfiddle.net/va438nqk/

VueJS Slot v-text

2 个答案: