无法在模板 vue 中插入组件答案

【问题标题】：Can not insert component inside template vue无法在模板 vue 中插入组件
【发布时间】：2021-05-04 01:37:17
【问题描述】：

我想在另一个组件中插入一个组件。

我不知道我做错了什么，但是这个例子不起作用。

这是我的 Vue 实例和组件定义：

new Vue({
  el:"#show",
  components:{
    dinnerMenu
  },
  data:{
    work:true
  }
});
    
Vue.component("dinnerMenu", {
  template: `
    <ul>
      <li v-for="item in food">{{food}}</li>
    </ul>
  `,
  data() {
    return {
      food: ['eggs', 'milk']
    }
  }
});
    
    
new Vue({
  el: "#secondLayer"
});

这里是html代码：

<div id="show">
  <template v-if="work">
    <div id="secondLayer">
      <dinnerMenu></dinnerMenu>
    </div>
  </template>
</div>

这里是the code in js fiddle，你可以自己试一试。

【问题讨论】：

标签： node.js vue.js components

【解决方案1】：

我在代码中看到了三个基本问题。首先，您可以检查您的控制台，它已经说明了问题所在。

你使用

components: {
  dinnerMenu
}

哪个是短版

components: {
  dinnerMenu: dinnerMenu // Key dinnerMenu and value is value of "dinnerMenu" variable.
}

但是你没有dinnerMenu 变量。首先初始化它。您需要重新格式化您的代码，如下所示：

dinnerMenu = Vue.component("dinnerMenu", {
  template: `
    <ul>
      <li v-for="item in food">{{food}}</li>
    </ul>
  `,
  data() {
    return {
      food: ['eggs', 'milk']
    }
  }
});

new Vue({
  el:"#show",
  components:{
    dinnerMenu
  },
  data:{
    work:true
  }
});  
    
new Vue({
  el: "#secondLayer"
});

第二个问题在您的帖子中不可见，但在 js fiddle 中可见。它与不正确的 HTML 元素上的 vue 绑定有关。

你的 HTML 结构是这样的：

<div id="show">
  <template v-if="work">
    <div id="secondLayer">
      <dinnerMenu></dinnerMenu>
    </div>
  </template>
</div>

注意，div 的 id 是“secondLayer”，但您将自定义组件注册到不同的 Vue 实例。 el:"#show"

您应该为正确的 Vue 实例注册它。

new Vue({
  el:"#show",
  /* REMOVED components:{
    dinnerMenu
  }, */
  data:{
    work:true
  }
});  

new Vue({
  el: "#secondLayer",
  components:{
    dinnerMenu
  }, // ADDED
});

最后一个问题是您在 HTML 中的组件调用。您应该使用烤肉串盒。

<div id="show">
  <template v-if="work">
    <div id="secondLayer">
      <dinner-menu></dinner-menu> <!-- Use kebab case for your custom components -->
    </div>
  </template>
</div>

应该可以的。

另外，请尽量为“未来的你”和其他人编写清晰的代码。遵循最佳做法和一些样式规则。

另外，请将您的 HTML 添加到您的问题中，以便其他人可以更好地查看和理解问题。

如果您不想遵循 kebab-case-custom-component 约定，请阅读component registration from VueJS official docs。

【讨论】：