Vue自定義組件(簡單實現一個自定義組件)

在用vue構建項目的過程當中，咱們有時會用到別人開發的組件如vue-router；使用他人組件的正常步驟以下：
一、命令行進行安裝，執行install；
二、在vue項目中的入口文件main.js中，進行導入；
三、而後用Vue.use(plugin)引入該組件。

咱們也能夠創造屬於本身的組件，具體步驟以下：
一、在components文件中建立test文件；
二、在test文件中，建立index.js和Test.vue；
三、Test.vue中的代碼以下：

<template>
  <div>
    <div>實現自定義組件</div>
  </div>
</template>
<script>
export default{
  data () {
    return {
      msg: 'hello vue'
    }
  },
  components: {}
}
</script>
<style>
</style>

四、test文件夾下的index.js中的代碼以下：

import MyTest from './Test.vue'
const Test = {
  install (Vue) {
    Vue.component('Test', MyTest)
  }
}
export default Test

五、入口文件main.js進行相關的配置：

import Test from './components/test'
Vue.use(Test)

六、如此這般，就能夠在其它組件中正常使用，以下：

<template>
  <div class="hello">
      <Test></Test>
  </div>
</template>

自定義組件Test的內容("實現自定義組件")將會展現出來。

注：test文件指的是自定義組件文件夾；index.js指的是組件的入口加載文件；Test.vue指的是組件模板。