这篇文章主要介绍了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,注册,全局组件,局部组件
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“VUE注册全局组件和局部组件过程解析”评论...
更新动态
20240515
20240515
- 王永.1997-十二道金牌【鸿心工作室】【WAV+CUE】
- dnf110换装在哪刷
- dnf110新版buff换装在哪里做
- dnf110满级了去哪里刷史诗
- 群星2024《龙年精逊纯银CD[WAV+CUE]
- 刘月宁《扬琴独奏-木兰辞变奏曲》[FLAC+CUE]
- 萧萧.2006-IM萧萧【海蝶】【WAV+CUE】
- 这也太香了!《剑星》推出1:4比例活肤战衣雕像
- Steam官方确认:限制《地狱潜者2》上架国家是索尼决定
- 亚当兰伯特踢馆《歌手》登热搜 网友:那英压力巨大
- 群星《当我跑步时我什么都不想 影视原声带》[320K/MP3][34.72MB]
- 群星《当我跑步时我什么都不想 影视原声带》[24bit 48kHz][FLAC/分轨][187.21MB]
- 韩红/陈萨《沉默的光影》[320K/MP3][101.74MB]
- 吳雨霏.2015-霏凡精选2CD【金牌大风】【WAV+CUE】
- 丁欣睿.2023-宜享受太阳雨【StreetVoice】【FLAC分轨】