VUE注册全局组件和局部组件过程解析
2019-10-27 18:05
3371 查看
这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
全局组件
第一步:在components文件夹下建立一个子文件Users.vue
<template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users', data () { return { msg: '用户名' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
第二步:在main.js中进行全局注册
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' // 全局配置组件第一步 Users是文件夹的名字 import Users from './components/Users' Vue.config.productionTip = false // 全局注册组件第二部 users是 Vue.component('users',Users) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
第三步:在对应的文件中引用
<template> <div id="app"> <!-- <router-view/>是子路由视图 --> <!-- <router-view/> --> <p>{{title}}</p> <users></users> </div> </template> <script> export default { name: 'App', data(){ return{ title:"users是全局组件的实例化的名字" } } } </script> <style> </style>
局部组件
在components文件夹下新建一个子组件Users.vue文件,然后在对应的文件中引用
<template> <div id="app"> <!-- <router-view/>是子路由视图 --> <!-- <router-view/> --> <p>{{title}}</p> <users></users> </div> </template> <script> /*局部注册组件*/ import Users from './components/Users' export default { name: 'App', data(){ return{ title:"users是全局组件的实例化的名字" } }, components:{ Users, } } </script> <style> </style>
或者
<template> <div id="app"> <app-header></app-header> <users></users> <app-footer></app-footer> </div> </template> <script> import Users from './components/Users' import Header from './components/Header' import Footer from './components/Footer' export default { name: 'App', data(){ return{ title:"users是全局组件的实例化的名字" } }, components:{ 'users':Users, 'app-header':Header, 'app-footer':Footer } } </script> <style> </style>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue.js组件的全局注册和局部注册详解
- vue.js 中 :is 与 is 的用法和区别,学习全局与局部注册组件
- vue 组件 全局注册和局部注册
- vue 组件 全局注册和局部注册的实现
- vue注册局部组件与全局组件
- vue 组件 全局注册与局部注册的方法
- vue.js 全局组件和局部组件
- vue 的 solt 子组件过滤过程解析
- vue开发技巧——批量注册全局组件
- Vue封装的组件全局注册并引用
- vue组件基础详解 — 全局组件、局部组件
- vue中npm包全局安装和局部安装过程
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
- vue 使用高德地图vue-amap组件过程解析
- vue全局注册组件
- vue全局组件和局部组件(一)
- vue.js 组件-全局组件和局部组件
- Vue学习笔记2-6 全局组件与局部组件、子组件数据传递
- vue插件 使用use注册Vue全局组件和全局指令
- 对于vue中的全局组件和局部组件的一点小见解