父组件:
import child from './components/child.vue';
...components:{
child
},
methods:{
countChange(opt){
opt //为子组件传递过来的数据,可以是对象
}
}
<child :c="count" @child-change="countChange"></child>
//@child-change="countChange"中
countChange是父组件的方法,子组件$emit child-change 会触发父组件的这个方法
子组件:
<template>
<view>
<view>{{ c }}</view>
<view @click="changeCount('up')"></view>
这里调用的是子组件自己的方法,在此方法中向父组件传递数据并执行订阅事件
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
changeCount(type) {
this.$emit('child-change', { id: this.id, type: type });
}
},
props: {
c: {
type: Number,
default: 1
}
}
};
</script>