Vue组件（一）自定义组件

前言

在开发中，为了代码的重用，我们常常会把一个公用的部分，抽象成一个组件；这样，这个组件就可以再多个地方重复使用；
在Vue开发中，我们也可以自定义一个组件；

一、自定义一个组件

• 新建一个vue文件customInput.vue
• 实现组件代码

<template>
  <div>
    这是一个组件
  </div>
</template>
<script>
export default {
  // 这里name定义组件的名字
  name: "customInput",
};
</script>

二、局部引入组件

<template>
  <div class="home">
    首页
    // 使用组件
    <customInput></customInput>
  </div>
</template>
<script>
// 引入资源文件
import customInput from "./customInput"
export default {
  name: 'Home',
  // 定义想要使用的组件
  components: { customInput },
  data() {
    return {
      username: ''
    }
  },
  mounted() {
    this.username = '1111'
  }
}
</script>

效果图

三、全局引入组件

• 在main.js文件中，全局引入组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import customInput from "./components/customInput.vue"

Vue.config.productionTip = false
// 全局定义组件
Vue.component('customInput', customInput )

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

• 使用组件

<template>
  <div class="home">
    首页
    <customInput></customInput>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>