组件事件配合v-model使用
如果是用户输入，我们希望在获取数据的同时发送数据配合v-model来使用
<template>
<div>
<h3>ComponentA</h3>
<ComponentB @some-event="getHandle" />
<p>ComponentA接受的数据：{{ message }}</p>
</div>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data() {
return {
message: ""
}
},
components: {
ComponentB
},
methods: {
getHandle(data) {
this.message = data;
}
}
}
</script>
<template>
<div>
<h3>ComponentB</h3>
<input v-model="searchText" />
</div>
</template>
<script>
export default {
data() {
return {
searchText: ""
}
},
watch: {
searchText(newValue, oldValue) {
this.$emit("someEvent", newValue)
}
}
}
</script>
("someEvent", newValue)
}
}
}