一、$emit
1、this $emit(‘自定义时间名’,要传送的数据);
2、触发当前实例上的时间,要传递的数据会传给监听器;
二、$ on
1、VM.
o
n
(
′
事
件
名
′
,
c
a
l
l
b
a
c
k
)
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−
c
a
l
l
b
a
c
k
回
调
on('事件名',callback) --------------------callback回调
on(′事件名′,callback)−−−−−−−−−−−−−−−−−−−−callback回调emit要传送的数据FF1B
2、监听当前实例上自定义时间;
父组件:重置按钮
<template>
<common-form class="search-form" ref="thisSearchForm" :model="models" :forms='forms'>
<Button type="default" @click="resetForm" v-show="formBtns.reset" >重置</Button>
</common-form>
</template>
script>
import format from '@/plugins/format.js'
export default {
methods: {
resetForm () {
this.$refs.thisSearchForm.$emit('resetCommonForm')//获取ref为thisSearchForm的节点,触发此子组件的'resetCommonForm'事件
}
}
}
</script>
此common-form子组件:
<template>
<Form
ref="myCommonForninline"
:model="forms"
:rules="ruleValidate"
:label-width="model.labelWidth?model.labelWidth:90"
class="my-common-form">
>
</templaste>
<script>
export default {
name: 'commonForm',
props: {
model: {
type: Object,
default () {
return {
labelWidth: 90,
data: []
}
}
},
forms: {
type: Object,
default () {
return {}
}
}
},
mounted () {
this.$on('resetCommonForm', function () {//定义'resetCommonForm'函数,触发function里面的函数(将ref绑定为myCommonForninline的内容重置)
this.$refs.myCommonForninline.resetFields()
})
},
}
</script>