Vue-全局与局部组件

最近接触了一点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>