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克隆对象深度介绍
Nov 20 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
vue-cli 为项目设置别名的方法
Oct 15 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表单请求获得数据求和示例
2014/05/15 PHP
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Python 实现自动导入缺失的库
2019/10/29 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
Weblogc domain问题
2014/01/27 面试题
大专生的学习自我评价
2013/12/04 职场文书
工程班组长岗位职责
2013/12/30 职场文书
人事主管岗位职责
2014/01/30 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
年终奖发放方案
2014/06/02 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
儿子满月酒致辞
2015/07/29 职场文书
员工手册董事长致辞
2015/07/29 职场文书
小学校园广播稿
2015/08/18 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
python之基数排序的实现
2021/07/26 Python
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers