最近接触了一点Vue,自己看了一下书稍微记一下收获的笔记
1,如何全局调用一个组件?首先我在src目录下的components目录下写了一个Users.vue的组件
<template>
<div class="users">
<ul>
<li v-for="user in users" :key="user">
{{user}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'users',
data () {
return {
users:["bb","tom","xianren"]
}
}
}
</script>
<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 Users from './components/Users'
Vue.config.productionTip = false
//全局注册组件(一般不使用全局的方式,推荐使用局部组件的调用)
Vue.component("users",Users);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
最后在App.vue中使用
<template>
<div id="app">
<h1>{{title}}</h1>
<!--全局的users组件-->
<users/>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
title:"第一次学习vue,请多指教!"
}
}
}
</script>
<style>
</style>
2,局部调用组件,main.js中全局的配置注释掉
//注入手写的组件以备全局组件使用
// import Users from './components/Users'
//全局注册组件(一般不使用全局的方式,推荐使用局部组件的调用)
// Vue.component("users",Users);
然后在App.vue中使用
<template>
<div id="app">
<h1>{{title}}</h1>
<!--全局的users组件-->
<!-- <users/> -->
<!--局部调用的users组件-->
<juUser/>
</div>
</template>
<script>
//拿到所需的组件
import Users from './components/Users'
export default {
name: 'App',
data(){
return{
title:"第一次学习vue,请多指教!"
}
},
//注册组件
components: {
"juUser":Users
}
}
</script>
<style>
</style>