Question

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进程中未记录任何错误。由于没有记录任何内容，因此不确定从何处开始。生成的HTML中<header> div仍为空。

Answer 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>

导入Vue（Vue.js）组件导致无错误，但不显示

1 个答案: