1. 程式人生 > >Vue.js元件化筆記

Vue.js元件化筆記

區域性呼叫

<template>
    <my-page></my-page>
</template>

<script>
import MyPage from "xxx/MyPage.vue"
export default {
    components: {
        MyPage
    }
}
</script>

傳入引數

export default {
    props:{
        mvalue: {
            type: String,
            default
: ''
} } }

呼叫:

<template>
    <my-page :mvalue="value"></my-page>
</template>

<script>
import MyPage from "xxx/MyPage.vue"
export default {
    components: {
        MyPage
    },
    data() {
        return {
            value:'',
        };
    }
}
</script
>

“prop” 是元件資料的一個欄位,期望從父元件傳下來。子元件需要顯式地用 props 選項

子元件事件回撥

<my-car-choise @onselect="onSelectCarSubmit" :mtoken="mtoken" ref="myCarChoise"></my-car-choise>

onSelectCarSubmit(row){
    xxx
},

onselect(index,row){
    this.$emit('onselect',row);
},

子元件內部事件呼叫

<my-car-choise ref="myCarChoise"
></my-car-choise> this.$refs.myDriverChoise.xx();

refs調ref=調this.ref.索引名
也可以直接在父元件中使用this.$ref.索引名
這個時候,就可以獲得元件了,然後通過元件可以呼叫他的方法,或者是使用其資料。