这篇文章将为大家详细讲解有关Vue中怎么注册全局组件和局部组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。全局组件第一步:在components文件夹下建
这篇文章将为大家详细讲解有关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)
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中怎么注册全局组件和局部组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
--结束END--
本文标题: VUE中怎么注册全局组件和局部组件
本文链接: https://www.lsjlt.com/news/72454.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0