简单的Vue插槽示例不起作用

时间:2018-03-07 12:59:54

标签: vue.js vue-component

我正在尝试了解Vue模板中<slot>的用法。我理解它的方式,插槽可用于将组件中的子内容传递给模板。

以下是一个简短的最低工作示例(also on codepen)。

Vue.component('mine', {
  template: '#mine'
})

var app = new Vue({
  el: '#app' 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<script type="text/x-template" id="mine">
  <h1>this is it</h1>
  <slot></slot>
</script>

<div id="app">
  <mine>
    <p>why isn't this displayed</p>
  </mine>
</div>

我希望输出如下:

<h1>this is it</h1>
<p>why isn't this displayed</p>

然而,当呈现页面时,会出现第二行。

1 个答案:

答案 0 :(得分:4)

模板需要具有单个根DOM元素。看起来Vue只是将h1作为整个模板并丢弃其余模板:

&#13;
&#13;
Vue.component('mine', {
  template: '#mine'
})

var app = new Vue({
  el: '#app' 
})
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<script type="text/x-template" id="mine">
  <div>
    <h1>this is it</h1>
    <slot></slot>
  </div>
</script>

<div id="app">
  <mine>
    <p>why isn't this displayed</p>
  </mine>
</div>
&#13;
&#13;
&#13;

(使用&#34;开发者模式&#34;库的版本将为您提供有关此类事情的更好的错误消息:)

&#13;
&#13;
Vue.component('mine', {
  template: '#mine'
})

var app = new Vue({
  el: '#app' 
})
&#13;
<script src="https://vuejs.org/js/vue.js"></script>

<script type="text/x-template" id="mine">
    <h1>this is it</h1>
    <slot></slot>
</script>

<div id="app">
  <mine>
    <p>why isn't this displayed</p>
  </mine>
</div>
&#13;
&#13;
&#13;