写给赶时间的人
一句话
this.$emit('xxx', input), input最好是字符串, 如果需要传一个对象, 那么, 建议您在父组件里面, JSON.parse(input), 或者不要传原始对象, 需要const一个对象, 深拷贝您需要传的对象
写给有点时间看的人
作为一个半路出家的伪前端, 遇到坑, 基本都是因为自己基础知识不牢固, 例如今天遇到这个this.$emit的坑
需求
一个简单的需求, 页面上面有一个搜索框, 里面需要填2个字段, 按确定进行搜索
实现
我是这样想的, 填两个字段, 那我就把他们写在一个对象里面, this.$emit的时候, 传这个对象的值就好了
我的实现方法
search 组件
<template>
<div>
<div>search</div>
<input type="text" v-model="searchKey.key_apple">
<input type="text" v-model="searchKey.key_blackBerry">
<button @click="onSubmit">确定</button>
</div>
</template>
<script>
export default {
data() {
return {
searchKey: {
key_blackBerry: "",
key_apple: ""
}
};
},
methods: {
onSubmit() {
this.$emit("onSearchSubmit", this.searchKey);
}
}
};
</script>
父组件
<template>
<section class="container">
<div>
<Search @onSearchSubmit="onSearchSubmit"/>
<h1>{{parent_search}}</h1>
</div>
</section>
</template>
<script>
import Search from "~/components/Search.vue";
export default {
components: {
Search
},
data() {
return {
parent_search: {}
};
},
methods: {
onSearchSubmit(input) {
this.parent_search = input;
}
}
};
</script>
效果
实际上也能达到要求, 但是, 出现了一个意想不到的结果:
当第一次点击确定之后, 我们再在搜索框里面输入, 预想的结果是什么都没变化, 例如h1里面的字符不会变化, 但是, 结果确发现, 双向绑定了, 这不是我想要的结果...我并没有实现父子组件间的双向绑定(例如通过复写组件的change方法)
问题来了, 问题解决
发生这个情况的原因在于, 我写的自组件this.$emit里面, 是一个对象, 其实传的是它的地址
所以, 后面这样改写子组件就ok了
<template>
<div>
<div>search</div>
<input type="text" v-model="searchKey.key_apple">
<input type="text" v-model="searchKey.key_blackBerry">
<button @click="onSubmit">确定</button>
</div>
</template>
<script>
export default {
data() {
return {
searchKey: {
key_blackBerry: "",
key_apple: ""
}
};
},
methods: {
onSubmit() {
const input = JSON.parse(JSON.stringify(this.searchKey));
this.$emit("onSearchSubmit", input);
}
}
};
</script>
总结
哈哈哈, 基础真的很重要~
