vue2.0在頁面中自定義元件模組,以及頁面與元件之間的資料傳遞
阿新 • • 發佈:2019-01-29
1.在頁面上引入寫好的元件
import UpdataPassword from './updataPassWord' //updataPassWord為元件的name
2.註冊元件
components:{ //註冊元件
UpdataPassword
},
3.駝峰命名的方式
<updata-password> </updata-password>
4.頁面傳資料給元件
頁面:
<updata-password :prop-data="0" @hide="hidemodifyBox"> </updata-password>
// prop-data 傳到元件的資料 hide元件裡的監聽資料變化
元件:
export default {
name: "updataPassword",
props: ['propData']
}
可以用this.propData獲取到props(頁面傳過來的值) 為0
this.$emit("hide"); //觸發頁面自定義方法hide,然後在頁面可以監聽到這個方法v-on
hidemodifyBox:function(){
this.modifyShow=false;
}