1. 程式人生 > >vue2.0在頁面中自定義元件模組,以及頁面與元件之間的資料傳遞

vue2.0在頁面中自定義元件模組,以及頁面與元件之間的資料傳遞

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;
  }