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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
python list格式数据excel导出方法
2018/10/31 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python 读取修改pcap包的例子
2019/07/23 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Python中如何引入第三方模块
2020/05/27 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
保险公司晨会主持词
2014/03/22 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
学生检讨书范文
2014/10/30 职场文书
玄武湖导游词
2015/02/05 职场文书
2015年加油站工作总结
2015/05/13 职场文书
历史博物馆观后感
2015/06/05 职场文书
初中英语教学随笔
2015/08/15 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL