Question

我是vuejs的新手，刚刚开始玩它。在尝试不同的教程时，我仍然坚持使用这个无效的代码示例。任何人都可以解释为什么第二组件没有被渲染？

＆＃13;

Vue.component('first-component', {
  template: `<div>This is first component: {{val}}!</div>`,
  data: function () {
    return {
      val: "FIRST <second-component></second-component>"
    }
  },
})

Vue.component('second-component', {
  template: `<p>This is second component: {{val}}</p>`,
  data: function () {
    return {
      val: 'SECOND'
    }
  },
})

new Vue({
  el: '#example'
})

＆＃13;

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>

<div id="example">
  <first-component></first-component>
</div>

＆＃13;

Answer 1

问题是您已将<second-component>放入val变量中，并尝试使用Mustache语法呈现它但是如docs 中所述双重胡须将数据解释为纯文本，不是HTML

您可以使用v-html将组件作为纯HTML插入，但又是stated：将内容作为纯HTML插入 - 它们不会被编译为Vue模板。

呈现second-component的唯一方法是将其放在模板中：

template: `<div>This is first component: {{val}}!<second-component></second-component></div>`,

Answer 2

那是因为你将它作为“数据”返回“val”。因此，不会对组件进行评估。如果你把它放在模板中，它就可以了。

Vue.component('first-component', {
  template: `<div>This is first component: {{val}}! <second-component></second-component></div>`,
  data: function () {
    return {
      val: "FIRST"
    }
  },
})

Vue.component('second-component', {
  template: `<p>This is second component: {{val}}</p>`,
  data: function () {
    return {
      val: 'SECOND'
    }
  },
})

new Vue({
  el: '#example'
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>

<div id="example">
  <first-component></first-component>
</div>

Vue.js2 - 未呈现子组件

2 个答案: