VUEJS入坑日记.3-子组件调用父组件方法
在子组件中通过$emit()调用父组件的方法。先看官方emit()原型:vm.emit()原型:vm.emit()原型:vm.emit( eventName, […args] )vm.$emit( eventName, […args] )参数:{string} eventName[…args]触发当前实例上的事件。附加参数都会传...
在子组件中通过$emit()调用父组件的方法。
先看官方 emit()原型:vm. e m i t ( ) 原 型 : v m . emit( eventName, […args] )
vm.$emit( eventName, […args] )
参数:
{string} eventName
[…args]
触发当前实例上的事件。附加参数都会传给监听器回调。
我们的做法是,把子组件的$emit绑定到父组件的eventName事件上,父组件监听eventName,当它被触发时,会调用父组件对应的方法。
父组件:
<template>
<wacke-table :formItem="formItem" @onSubmit="parentFun"></wacke-table>
</template>
<script>
export default {
name: 'formcreate',
components: {
wackeTable
},
data(){
return{
formItem:[]
}
},
mounted () {
},
methods:{
parentFun(msg) {
this.$Message.success(msg);
}
}
};
</script>
在父组件上绑定了onSubmit方法,在子组件中,用$emit()直接调用;
子组件:
<template>
<Drawer title="新增-components" v-model="drawer1" width="40" :mask-closable="false" :styles="styles">
<Form ref="formData" :model="formData" :label-width="100">
<Row v-for="(row,rowindex) in formData.items" :key="rowindex" >
<Col span="16" offset="2" >
<FormItem :prop="'items.' + rowindex + '.value'" :rules="{required: row.required , message: '这是必填项', trigger: 'blur'}" :label="row.title" >
<Input v-if="_findItemInArray(row.add,['text','textarea'])" :type="row.add" v-model="row.value" placeholder="请输入..."></Input>
<Select v-if="row.add=='select'" v-model="row.value" >
<Option v-for="(op,opindex) in row.items" :key="opindex" :value="op.value">{{op.label}}</Option>
</Select>
<DatePicker v-if="row.add=='date'" type="date" format="yyyy-MM-dd" @on-change="row.value=$event" placeholder="-请选择-"></DatePicker>
</FormItem>
</Col>
</Row>
</Form>
<div class="demo-drawer-footer">
<Button style="margin-right: 8px" @click="drawer1 = false">取消</Button>
<Button type="primary" @click="handleSubmit">确定</Button>
</div>
</Drawer>
<!--#drawer-->
</template>
<script>
export default {
name: 'wacke-table',
props:['formItem'],
data() {
return {
// drawer
styles: {
height: 'calc(100% - 55px)',
overflow: 'auto',
paddingBottom: '53px',
position: 'static'
},
drawer1:true,
modal1:false,
spinShow:true,
}
},
computed: {
formData: function () {
var obj = new Object();
obj.items = this.formItem;
return obj;
}
},
methods: {
// item是否存在于array中
_findItemInArray (item, array) {
return array.indexOf(String(item)) < 0 ? false : true;
},
handleSubmit () {
var formItem = new Object();
this.formData.items.forEach(function (h,index) {
const key = h.key;
formItem[key] = h.value;
});
this.$emit('onSubmit',formItem);
}
},
created() {
},
mounted () {
}
};
</script>
如上,子组件wacke-table的handleSubmit()方法中,将$emit绑定到父组件的onSubmit事件。这样,当父组件监听到子组件的handleSubmit方法被触发的时候,就会调父组件的parentFun方法了。
更多推荐
所有评论(0)