Question

嘿我正在使用Vue + Laravel并使用webpack.mix进行包控制。

目前，陷入了一个特殊的问题。我正在尝试在app.js文件中渲染组件。

App.js

Vue.component('navigation',require ('./views/navigation.vue'));
Vue.component('Example', require('./components/Example.vue')); //this works
const app = new Vue({
  el: '#app',
  components: {
    navigation
  }
});

正在渲染组件的Php Blade文件。

<body>

    <div id="app">
        <div class="container">
            <navigation></navigation>
        </div>         
    </div>

我的导航组件

<template>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-
       toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
       controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

由于示例组件是开箱即用的，所以它可以工作，但导航组件会吐出这个错误。

app.js：814 [Vue警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请务必提供＆＃34; name＆＃34;选项。

任何帮助都将不胜感激。

Answer 1

无需两次注册您的组件。删除components部分，只需在实例前添加Vue.component即可。喜欢这个

试试这个

<强> app.js

Vue.component('example', require('./components/Example.vue'));

Vue.component('navigation', require ('./views/navigation.vue'));

const app = new Vue({
    el: '#app'
});

<强>视图/ navigation.vue

<template>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" 
                        class="navbar-toggle collapsed" 
                        data-toggle="collapse" 
                        data-target="#navbar" 
                        aria-expanded="false" 
                        aria-controls="navbar"
                >
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Vue元素未呈现

1 个答案: