Vue2 组件注册

1、新建组件

新建一个Layout.vue页面

2、局部引入

如果想在Login.vue页面引入这个组件，代码如下

 1 <script>
 2 import layout-view from '@/components/Layout'
 3 export default {
 4   name: 'Login',
 5   data () {
 6     return {
 7       msg: 'This is Y.Vue'
 8     }
 9   },
10   components: { layout-view }
11 }
12 </script>

3、全局声明

在src下的main.js中进行注册Layout.vue

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 import Layout from '@/components/Layout'
 5 Vue.config.productionTip = false
 6 
 7 Vue.component('layout-view', Layout)
 8 /* eslint-disable no-new */
 9 new Vue({
10   el: '#app',
11   router,
12   components: { App },
13   template: '<App/>'
14 })

5、使用

在Login.vue中使用<layout-view></layout-view>

1 <template>
2   <div>
3     <div class="hello">这是views文件夹下的Login.vue文件</div>
4     <layout-view></layout-view>
5   </div>
6 </template>

 

posted @ 2020-08-23 19:11  PrintY  阅读(388)  评论(0)  编辑  收藏  举报