Vue自定義元件(簡單實現一個自定義元件)
摘要：
在用vue構建專案的過程中，我們有時會用到別人開發的元件如vue-router；使用他人元件的正常步驟如下：
1、命令列進行安裝，執行install；
2、在vue專案中的入口檔案main.js中，進行匯入；
3、然後用Vue.use(plugin)引入該元件。
...
在用vue構建專案的過程中，我們有時會用到別人開發的元件如vue-router；使用他人元件的正常步驟如下：
1、命令列進行安裝，執行install；
2、在vue專案中的入口檔案main.js中，進行匯入；
3、然後用Vue.use(plugin)引入該元件。
我們也可以創造屬於自己的元件，具體步驟如下：
1、在components檔案中建立test檔案；
2、在test檔案中，建立index.js和Test.vue；
3、Test.vue中的程式碼如下：
<template>
<div>
<div>實現自定義元件</div>
</div>
</template>
<script>
export default{
data () {
return {
msg: 'hello vue'
}
},
components: {}
}
</script>
<style>
</style>
4、test資料夾下的index.js中的程式碼如下：
import MyTest from './Test.vue'
const Test = {
install (Vue) {
Vue.component('Test', MyTest)
}
}
export default Test
5、入口檔案main.js進行相關的配置：
import Test from './components/test' Vue.use(Test)
6、如此這般，就可以在其它元件中正常使用，如下：
<template> <div class="hello"> <Test></Test> </div> </template>
自定義元件Test的內容("實現自定義元件")將會展示出來。
注：test檔案指的是自定義元件資料夾；index.js指的是元件的入口載入檔案；Test.vue指的是元件模板。