Vue.js元件化筆記
阿新 • • 發佈:2019-01-01
區域性呼叫
<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();
也可以直接在父元件中使用this.$ref.索引名
這個時候,就可以獲得元件了,然後通過元件可以呼叫他的方法,或者是使用其資料。