vue之prop与$emit的用法说明

来源：jb51　　时间：2022/4/11 12:27:07　　对本文有异议

prop与$emit的用法

1.vue组件Prop传递数据

组件实例的作用域是孤立的，这意味着不能在子组件的模板内直接引父组件的数据，如果要让子组件使用父组件的数据，则需要通过子组件的prop选项；prop是单向绑定的，当父组件的属性变化时，将传递给子组件，但是反过来不行；这样主要是防止子组件无意修改父组件的状态；每次父组件更新时，子组件的所有prop都会更新为最新值。这意味着你不能在子组件内部改变prop。

2.子组件可以使用$emit触发父组件的自定义事件

vm.$emit( event, arg )：发送数据，第一个参数是发送数据的名称，接收时还用这个参数接收，第二个参数是这个数据现在的位置

拓展：

vm.$on( event, fn )：接收数据，第一个参数是数据的名称，与发送时的名字对应，第二个参数是一个方法，要对数据的操作

注：vue模板只能有一个根对象 (在template中只能用一个标签来包裹全部元素)不然会报错如：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

父组件：

<template>
? <div>
? ? ?<div>父组件的addName：{{addrName}}</div>
? ? <child-prop @showAddrName="updateAddrName" :sendData="addrName"></child-prop>
? </div>
</template>

<script>
? import childProp from "./childProp";
? export default {
? ? name:'index',
? ? components: {childProp},
? ? data () {
? ? ? return {
? ? ? ? addrName:"北京"
? ? ? }
? ? },
? ? methods:{
? ? ? updateAddrName(data){//触发子组件城市选择-选择城市的事件
? ? ? ? console.log(data);
? ? ? ? this.addrName = data.addrName;//改变了父组件的值
? ? ? ? console.log('toCity:'+this.addrName)
? ? ? }
? ? }
? }
</script>

子组件：

<template>
? <div>
? ? <h3>父组件传给子组件的addrName:{{sendData}}</h3>
? ? <br/><button @click='addr(`上海`)'>点击此处将‘上海'发射给父组件</button>
? </div>
</template>

<script>
? export default {
? ? name:'childProp',
? ? props:["sendData"], // 用来接收父组件传给子组件的数据
? ? methods:{
? ? ? addr(val) {
? ? ? ? let data = {
? ? ? ? ? addrName: val
? ? ? ? };
? ? ? ? this.$emit('showAddrName',data);//select事件触发后，自动触发showCityName事件
? ? ? }
? ? }
? }
</script>

今天遇到的坑--this.$emit

写给赶时间的人

一句话

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>