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字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 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通用检测函数集合
2006/11/25 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
python下读取公私钥做加解密实例详解
2017/03/29 Python
基于python 字符编码的理解
2017/09/02 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python圣诞树编写实例详解
2020/02/13 Python
Python实现分数序列求和
2020/02/25 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
女大学生个人求职信
2013/12/09 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
美术专业自荐信
2014/07/07 职场文书
工作表扬信
2015/01/17 职场文书
物业保洁员管理制度
2015/08/05 职场文书
协议书格式模板
2016/03/24 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
vue使用watch监听属性变化
2022/04/30 Vue.js