JavaScript

超轻量级php框架startmvc

VUE注册全局组件和局部组件过程解析

更新时间:2020-09-17 13:12:02 作者:startmvc
这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详

这篇文章主要介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。