vue 父子之間的通訊
阿新 • • 發佈:2018-09-06
boolean 註冊 input child ucc port name bsp ldd
//父組件
<template>
<Button @click=‘openChild‘><Button>
<child-modal :modalStatus="Status" @parentClick=‘click‘></child-modal> //其次,父的自定義事件parenClick被觸發
</template>
<script>
import chilModal from ‘./chilModal.vue‘
export default{
components:{
chilModal //註冊組件
},
data(){
return{
Status:false,
}
}
methods:{
click(childData){ //而click是parentClick的方法,最終被觸發
console.log(‘得到子傳過來的數據’,childData)
this.modalStatus = false;
}
openChild(){
//status通過props將true傳給子的modalStatus
this.Status = true
}
}
}
</script>
//子組件
<template>
<Modal v-model="modalStatus">
<div slot="footer">
<Input type="text" v-model="obj.nameIpt"/>
<Input type="text" v-model="obj.ageIpt"/>
<Input type="text" v-model="obj.weightIpt"/>
<Button type="success" @click="ok">確認</Button>
</div>
</Modal>
</template>
<script>
export default {
data(){
return{
obj:{
nameIpt:‘‘,
ageIpt:‘‘,
weightIpt:‘‘,
}
}
},
props:{
modalStatus:{
type:Boolean,
default:false
},
},
methods: {
ok () {
//首先,子組件觸發parentClick(它是父的自定義事件),並攜帶了數據obj
this.$emit(‘parentClick‘,this.obj)
},
}
}
</script>
vue 父子之間的通訊