VueJS Slot v-text

我想在默认范围内显示一个变量。此版本的作品。VueJS Slot v-text

<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作品。

来源

2017-06-18 Murad Sofiyev

槽超出范围。数据只能在#app el内访问。 – SaJed

我的数据函数里面的myComponent和数据不可访问#app中只有accesible myComponent里面 –

避免使用用于数据箭头功能，正确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/

来源

2017-06-18 11:03:12

不，我认为可能问题不明白，你告诉答案改变数据方法，但我在我的问题中说 {{namedSlotText}}是工作，但不工作这意味着它不是数据问题，如果数据是内部组件是必须的功能 –

啊我看到你想做什么，我错过了你使用的组件。你只是使用一个标准插槽，所以你可以通过在插槽之间放置文本来设置默认值：https://jsfiddle.net/va438nqk/ –

是的，我知道我问为什么看起来像那个例子https://jsfiddle.net/tL88259x /不工作？ –

当你传递一个属性到slot，基本上你正在使用为U数据由插槽的内容sed。这个概念被称为scoped slots。

此代码

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

是仅使得提供给由所述槽的内容所使用的text属性。为了使用该属性，您必须首先定义一个范围模板，然后明确引用内容中的属性。

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

来源

2017-06-18 17:08:08 Bert

VueJS Slot v-text

回答

相关问题