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语法糖实质上可以修改为： <blockquote> <child v-bind:value="message " v-on:input="function(e){ message = e }" ></child> </blockquote> 在组件的实现中，可以通过v-model属性来配置子组件接收的prop名称，以及派发的事件名称。例子： <blockquote> 父组件 <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) } } </blockquote> 默认情况下，一个组件上的v-model会把value用作prop且把input用作event。但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选择可以回避这些情况产生的冲突。js监听input输入框输入数据改变，用oninput，数据改变后就会立刻触发事件。通过input事件把数据$emit出去，在父组件接受。父组件设置的值为input $emit过来的值 <h4>3.2 v-model被用在自定义组件上 </h4> <blockquote> <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> </blockquote> 显然，custom-input 与父组件的交互如下： <ol><li>父组件的 searchText 变量传入 custom-input 组件，使用的 prop 名为 value；</li><li>custom-input 组件像父组件传出名为 input 的事件，父组件将接收到的值赋值给 searchText </li></ol> 所以，custom-input 组件的实现类似于这样： <blockquote> Vue.component("custom-input",{ props:["value"], 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(()=>{ } ) </li><li>3、在methods:{ } 方法中使用，也需要使用this.$nextTick(()=>{ } ) 等到页面完全渲染完毕之后在调用即可

场景：

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

讯享网

子组件部分：

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

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

讯享网

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

3.1 v-model 语法糖实现原理

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

相关推荐

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