Vue子组件操作父组件的数据

父组件：

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')">&#xe600;</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>

 

转载于:https://my.oschina.net/u/3734945/blog/3049389