vue父子组件传值emit（vue父子组件传值ref）



在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

第一步：父传子（props）

第二步：子传父（$emit()）

       1----props

       2----$emit()

parent.vue

child.vue

3.1 v-model 语法糖实现原理

（1）作用在表单元素上 动态绑定了input的value指向了message变量，并在触发input事件的时候去动态把message设置目标值

<input v-model="sth">
实际上相当于
<input

        v-bind:value="message"

        v-on:input="message= $event.target.value"

>

// $event 指代当前触发的事件对象

// $event.target 指代当前触发的事件对象的dom

// $event.target.value 就是当前dom的value值

// 在 @input 方法中，value=>sth

// 在 :value 中，sth=>value 

（2） 作用在组件上 在自定义组件中，v-model默认会利用名为 value的prop 和 名为input的事件

本质是一个父子组件的语法糖，通过prop和$emit实现。因此父组件v-model语法糖实质上可以修改为：

<child

        v-bind:value="message "

        v-on:input="function(e){ message = e }"

></child>

在组件的实现中，可以通过v-model属性来配置子组件接收的prop名称，以及派发的事件名称。例子：

父组件

<aa-input v-model="aa">
实际上相当于
<aa-input

        v-bind:value="aa"

        v-on:input="aa = $event.target.value"

></aa-input>

子组件

<input

        v-bind:value="aa"

        v-on:input="onmessage"

>

props:{value:aa},

                $emit('input',e.target.value)
        }

}

默认情况下，一个组件上的v-model会把value用作prop且把input用作event。但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选择可以回避这些情况产生的冲突。js监听input输入框输入数据改变，用oninput，数据改变后就会立刻触发事件。通过input事件把数据$emit出去，在父组件接受。父组件设置的值为input  $emit过来的值

3.2 v-model被用在自定义组件上 

<input v-model="searchText">
实际上相当于
<input

        v-bind:value="searchText"

        v-on:input="searchText = $event.target.value"

>

用在自定义组件上也是同理：

<custom-input v-model="searchText">
实际上相当于
<custom-input

        v-bind:value="searchText"

        v-on:input="searchText = $event"

></custom-input>

显然，custom-input 与父组件的交互如下：

1. 父组件的 searchText 变量传入 custom-input 组件，使用的 prop 名为 value；
2. custom-input 组件像父组件传出名为 input 的事件，父组件将接收到的值赋值给 searchText 

      所以，custom-input 组件的实现类似于这样：

        template:`     

                <input

                        v-bind:value="value"

                        v-on:input="$emit('input',$event.target.value)"

>

        `

})

• 当传值进，子组件想要改变这个值时，可以这么做

v-model="num"  指令,  :num.sync="num"   修饰符

传值方式：

Vue2注意：v-model 只能有一个；.sync 可以有多个。

此外，.sync是Vue 2中的指令，而在Vue 3中，v-model取代了.sync的位置，并且可以在一个组件中使用多次。

REFS缺点只能在初始化的时候获取，而且需要延迟，不是必须要用到内部方法，可以不考虑。
但若因为过多的派发事件导致卡顿，也可考虑REFS。 

使用$refs进行通讯的弊端主要有以下几点：

破坏了单向数据流的原则：在Vue中，数据应该是单向流动的，即从父组件向子组件流动。使用$refs通信时会破坏这种单向数据流的原则，因为父组件可以直接修改子组件中的数据，容易导致状态管理的混乱和难以维护。

引起脆弱的组件关系：使用$refs通信时，父组件和子组件之间形成了紧密的耦合关系，这使得组件变得更加脆弱，如果其中一个组件发生了变化，则可能导致另一个组件无法正常工作。

可能导致组件复用困难：在Vue中，组件是可以复用的。但是，如果使用$refs进行通信，则只能将父组件和子组件绑定在一起，不能实现真正的组件复用。

使用了在父组件中调用子组件的方法，来获取传递的参数。但是还是没有获取到传递过来的参数。之后发现，以下三点小坑坑：

• 1、使用this.$refs如果要在mouend()中使用，必须要在this.$nextTick(()=>{  } )   这里面实现，要不是找不到ref，原因是mouned（）之后，BOM节点还没有完全挂载上，于是找不到定义的ref。
• 2、可以直接在updata()的生命周期函数中使用，不用写this.$nextTick(()=>{  } ) 
• 3、在methods:{  }  方法中使用，也需要使用this.$nextTick(()=>{  } )  等到页面完全渲染完毕之后在调用即可

场景：

父组件中给子组件传值，然后在父组件中触发事件，同时更新传递给子组件的变量的值再调用子组件函数，此时如果直接调用，会导致父组件传递给子组件的值不能马上获取到！！

子组件部分：

有同学使用REFS，当然也可以，但是REFS缺点只能在初始化的时候获取，而且需要延迟，不是必须要用到内部方法，可以不考虑。
但若因为过多的派发事件导致卡顿，也可考虑REFS。

既然找到问题，是因为延迟导致的，所以这里需要在父组件中加一个定时器来延迟触发，更改后的代码如下：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/15136.html