Vue.js2 - 未呈现子组件

Question

我是 vuejs 新手，刚开始玩。在尝试不同的教程时，我被困在这个不起作用的代码示例中。谁能解释为什么 second-component 没有被渲染？

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'
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>

<div id="example">
  <first-component></first-component>
</div>

Answer 1

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

您可以使用 v-html to insert the component as plain HTML but again it is stated：内容作为普通内容插入 HTML - 它们不会被编译为 Vue 模板。

渲染 second-component 的唯一方法是将其放入模板中：

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

Answer 2

那是因为您在 "val" 中将其作为 "data" 返回。所以这不是对组件进行评估。如果你把它放在模板中，它就可以工作。

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 - 未呈现子组件

Vue.js2 - Child component is not being rendered

vue-router

vue-component

vuejs2