Vue--全局组件和局部组件

全局组件

导入文件
import Users from './components/Users'
全局注册组件
 Vue.component('users',Users);

0A959744-2B28-40E5-B70C-ABFF1750E8EF.png

局部组件

模板:-----html

<template>
  <div id="app">
     <h1>{{title}}</h1>
     <users></users>
  </div>
</template>

行为、

<script>
//导入文件
import Users from './components/Users'
export default {
  name: 'App',
  data()
  {
    return{
       title:"这是我第一个vue脚手架！"
    }
  },
//注册组件
  components:{
    "users":Users        &&Users都可以
  }
}
</script>

局部修饰（作用域）

分别修饰不同的组件 会产生不同的标识，如下图
<style scoped>
h1{
  color:green;
}
</style>
<style scoped>
h1{
    color:purple;
}
</style>

E4F247D1-9C32-4722-9478-9F92668197B2.png