如何在 Laravel Blade 中使用 vue.js 组件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/46070616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 16:36:44  来源:igfitidea点击:

How to use vue.js component in laravel blade?

javascriptphplaravelvue.js

提问by Rowinski Bartosz

I registered component in my app.js like this:

我在 app.js 中注册了组件,如下所示:

Vue.component('navbar', require('./components/Navbar.vue'));

Now I want to import that component:

现在我想导入该组件:

<template>
<nav class="navbar">CODE HERE</nav>
</template>

Into my blade.php file:

进入我的blade.php文件:

<body class="">
    <div id="app">
        <div class="">
        <navbar></navbar> <-- here!
        @yield('content')
        </div>
    </div>
</body>

What's the easiest way to do this?

什么是最简单的方法来做到这一点?

回答by Hiren Gohel

In app.js

app.js 中

import navbar from './components/Navbar.vue';
Vue.component('navbar', require('./components/Navbar.vue'));

var app = new Vue({
   el: '#app',
   components: {
       'navbar': require('./components/Navbar.vue'),
   }
});

In your blade:

在你的刀片中

<body class="">
<div id="app">
    <div class="">
       <navbar></navbar>
       @yield('content')
    </div>
</div>