vue2中如何使用组件-操作详解

局部注册

1.在src / components /下新建组件

命名使用大驼峰写法，例如LiHeader.vue

<template>
  <div class="liHeader">
    <p>组件</p>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.liHeader {
  width: 100px;
  height: 50px;
  background-color: pink;
  text-align: center;
  line-height: 50px;
}
</style>

2.在App文件中使用组件

主要共分三步：引入、注册、使用

<template>
  <div class="box">
    <!-- 3.使用组件 -->
    <LiHeader></LiHeader>
  </div>
</template>

<script>
// 1.引入组件
import LiHeader from "./components/LiHeader.vue";
// 2.注册组件
export default {
  components: {
    // LiHeader: LiHeader,
    // 简写
    LiHeader,
  },
};
</script>

<style lang="less">
.box {
  width: 100px;
  height: 200px;
  background-color: skyblue;
}
</style>

全局组件

1.和局部组件一样在components中创建一个组件

命名使用大驼峰写法，例如LiButton.vue

<template>
  <button class="button">按钮</button>
</template>

<script></script>
<style scoped lang="less">
.button {
  border-radius: 5px;
  background-color: rgb(194, 255, 192);
  color: #090909;
  border: none;
}
</style>

 2.在main.js中进行全局注册

import Vue from 'vue'
import App from './App.vue'
// 1.引入全局组件
import LiButton from './components/LiButtton.vue'

Vue.config.productionTip = false
// 2.注册全局组件
// Vue.component('组件名', 组件对象)
Vue.component('LiButton', LiButton)

new Vue({
  render: h => h(App),
}).$mount('#app')

3.在哪里需要，就在哪里使用

// 两种
// one:
<LiButton></LiButton>
// two
<li-button></li-button>