无法在模板 vue 中插入组件

Posted 2023-02-23

【中文标题】无法在模板 vue 中插入组件

【英文标题】：Can not insert component inside template 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，你可以自己试一试。

【参考方案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。