导入 Vue (Vue.js) 组件没有错误，但不显示
Posted
技术标签:
【中文标题】导入 Vue (Vue.js) 组件没有错误，但不显示【英文标题】：Importing Vue (Vue.js) Component Results in No Errors, But Doesn't Display 【发布时间】：2017-12-17 09:44:34 【问题描述】：Vue 的基本实现在这里作为测试运行，我在将数据分解为组件时遇到了一些问题。这是 html：
<body>
<header id="main-header">
<custom-header></custom-header>
</header>
</body>
我正在实例化一个 Vue 实例并将其绑定到#main-header：
import CustomHeader from '../header.vue';
const header = new Vue(
el: '#main-header',
data: chx,
components:
'custom-header': CustomHeader
,
methods:
run: function()
console.log('run');
,
print: function()
window.print()
,
save: function()
console.log('save');
);
以及导入的模板：
<template>
<div class="header-menu">
<img class="logo" src="images/logo.png">
</div>
<div class="header-menu">
<h1 id="date-range-label"><span v-show="dates.startFormatted">dates.startFormatted - dates.endFormatted</span></h1>
<i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i>
</div>
</template>
控制台或 Webpack 进程不会记录任何错误。不知道从这里去哪里，因为没有任何记录。 <header> div 在生成的 HTML 中保持为空。
【问题讨论】：
你的模板需要有一个根元素 @thanksd 很抱歉，我不知道你的意思。<div> 元素的根中有两个 <div> 元素。您需要将两者都包装在另一个 <div> 中或更改您的整体结构。
【参考方案1】：
您的自定义标题组件在其模板的根部有两个div 元素。一个组件只能有一个根元素。
在您的情况下，将内容包装在 div 元素中可能是最简单的：
<template>
<div>
<div class="header-menu">
<img class="logo" src="images/logo.png">
</div>
<div class="header-menu">
<h1 id="date-range-label"><span v-show="dates.startFormatted">dates.startFormatted - dates.endFormatted</span></h1>
<i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i>
</div>
</div>
</template>
【讨论】：
这开始抛出错误，这绝对是进步。我收到的错误是："TypeError: Cannot read property 'startFormatted' of undefined" 但是，此属性包含在 chx 的父 Vue 数据对象中。使对象中包含的数据对组件本身可用的最佳做法是什么？
如果你不通过 props 向子组件提供数据，它将无法访问它。这是一个单独的问题，我会阅读docs on components。以上是关于导入 Vue (Vue.js) 组件没有错误，但不显示的主要内容，如果未能解决你的问题，请参考以下文章