父组件
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<div>
<event :name="name" @eChange="eChange"></event>
</div>
</template>
<script>
import Event from './Event'
export default {
name: 'Parent',
components: { Event },
data () {
return {
name: ''
}
},
methods: {
eChange (value) {
console.log('parent', value)
this.name = value
}
}
}
</script>
<style scoped>
</style>
子组件
<template>
<div>
name: {{ name || "--" }}
<br/>
<input :value="name" @change="handleChange"></input>
<br/>
<br/>
<div @click="handleDivClick">
<button @click="handleClick">成功</button>
<button @click.stop="handleClick">失败</button>
</div>
</div>
</template>
<script>
export default {
name: 'Event',
props: {
name: String
},
methods: {
handleChange (e) {
console.log('handleChange')
// 这个方法调用父类标签中定义的方法,再去methods中调用对应的方法,返回值是父类对象
this.$emit('Echange', e.target.value)
// 这个方法直接调用父类的methods里方法,可以直接获得返回值
this.$parent.eChange(e.target.value)
},
handleDivClick (e) {
console.log('handleDivClick')
this.$emit('Echange', '')
},
handleClick (e) {
console.log(3)
// 阻止冒泡@click.stop或者e.stopPropagation()
// e.stopPropagation()
}
}
}
</script>
<style scoped>
</style>