Vue自定義元件(簡單實現一個自定義元件)
在用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指的是元件模板。