子组件 修改 父组件的值 子传父
父组件:
<template>
<parent @change-type="onChangeType"></parent>
</template>
<script>
data () {
return {
types: 0,
},
methods: {
onChangeType (type) { // type是子组件$emit传递的参数值
console.log(type)
this.types = type
}
}
</script>
子组件:
<template>
<div>
<span @click="changeFn(0)"></span>
<span @click="changeFn(1)"></span>
<span @click="changeFn(2)"></span>
</div>
</template>
<script>
data () {
return {
types: 0,
},
methods: {
changeFn (type) {
this.types = type
this.$emit('change-type', type) // 用来触发父组件定义的@change-type
}
}
</script>
父组件 定义 @function 名字
vue子组件修改父组件的值(子传父 )