VUE注册全局组件和局部组件过程解析


Posted in Javascript onOctober 10, 2019

这篇文章主要介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
在JavaScript中使用timer示例
May 08 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
electron-vue开发环境内存泄漏问题汇总
Oct 10 #Javascript
Vue使用NProgress的操作过程解析
Oct 10 #Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 #Javascript
使用vscode快速建立vue模板过程详解
Oct 10 #Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 #Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 #Javascript
You might like
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
常用的10个Python实用小技巧
2020/08/10 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
《胖乎乎的小手》教学反思
2014/02/26 职场文书
邀请书模板
2015/02/02 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书