以下是使用自己寫的一個簡單的文件上傳框為例

1、自定義組件結構（一個js文件，一個vue文件），最好單獨放一個文件

　　

2、upload.vue 內容

? ? ? ?

　　其中，action是父組件傳遞給子組件的參數，使用props進行接收，并關聯到action中。　　

　　props 父級傳給組件的數據 ? 然后用 ?$emit('方法名'，數據) 返回父級數據

　　

3、index.js內容

　　

　　index.js的內容分成3個步驟(缺一不可)：

　　　　a）、引入vue組件

　　　　b）、進行全局安裝

　　　　c）、導出組件

其中，const 定義的組件名稱（uploadSimple）需要等于組件初始化的時候Vue.component中定義的key名稱。

以上是完成一個子組件定義。

接下來進行組件的使用

4、在main.js文件中，導入自定義的組件，并進行Vue.use()

　　

5、在需要使用該組件的地方進行調用

　　

其中，:actionUrl='actionUrl'中的actionUrl值，在data中進行定義即可

　　?

?

父組件調用子組件的方法：

在父組件中引用子組件并定義ref

<v-food??ref="selectfood"></v-food>

調用定義在子組件中的方法show

this.$refs.selectfood.show();//同時也可以調用子組件中的屬性

?

轉載于:https://www.cnblogs.com/luoxuemei/p/9289897.html

總結

以上是生活随笔為你收集整理的vue自定义组件并使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。