vue子组件通过.sync修饰符修改props属性方式_vue.js_

子组件通过.sync修饰符修改props属性

在vue子组件中，如果我们直接修改props中的属性，会报错：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “val”

vue为我们提供了.sync修饰符来解决这个问题：

// 父组件中，通过.sync修改符绑定属性  // 子组件中，修改属性 

子组件修改父组件prop的几种方式

实际工作项目开发中，很经常会有父组件先传递值给子组件，再由子组件渲染展示的场景，下面我总结一下目前工作中遇到和用过的一些方式

常用方式

推荐，遵循prop单向传递的规则，基本数据类型和引用数据类型均可。

1. 通过父组件on监听子组件emit事件实现修改prop

原理：

• 给子组件中的input标签绑定value属性赋值prop中的值，因为是用value而不是v-model，所以修改input值的时候并不会影响到prop。
• 然后给input绑定input事件，每次输入内容都会触发input事件，在事件里通过this.$emit(‘父要监听的事件名’, 修改后的值)去将值向上传递。
• 父组件中通过on监听子组件刚刚触发的emit事件，将事件传递过来的值更新到父组件的data中。
• 父组件data中的值更新后，因为有通过prop传递给子组件，所以子组件也会同步更新prop值并渲染视图层。

父组件代码如下：

子组件代码如下：

2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop

原理：

• 给子组件中的input标签绑定value属性赋值prop中的值，因为是用value而不是v-model，所以修改input值的时候并不会影响到prop。
• 然后给input绑定input事件，每次输入内容都会触发input事件，在事件里通过this.$emit(‘父要监听的事件名’, 修改后的值)去将值向上传递。
• 父组件调用子组件传递prop时，在prop后加上.sync即可将事件传递过来的值更新到父组件的data中，因为sync其实就相当于执行了@监听子触发的事件名 = "父data中的属性名 = emit传递的值(即$event)"这一段代码。
• 父组件data中的值更新后，因为有通过prop传递给子组件，所以子组件也会同步更新prop值并渲染视图层。

父组件代码如下：

子组件代码如下：

取巧方式

主要针对引用数据类型，绕过了vue对于prop的检测机制，具体看项目规范是否允许这样写。

3.通过data实现修改prop

前提：只有引用数据类型可以实现

原理：

• 将父组件传入的prop直接赋值给子组件的data，此时prop和data两边的变量指向的都是同一个内存地址，所以修改data等于修改prop。
• vue2开始不允许直接修改prop，但此时我们表面修改的是data不是prop，因此vue不会抛出错误，相当于绕过了vue对于不允许修改prop的检测机制。

父组件代码如下：

子组件代码如下：

4.通过计算属性computed实现修改prop

前提：只有引用数据类型可以实现

原理：

• 在子组件中直接通过计算属性computed监听父组件传入的prop，此时计算属性computed和prop两边的变量指向的都是同一个内存地址，所以修改计算属性computed等于修改prop。
• vue2开始不允许直接修改prop，但此时我们表面修改的是计算属性computed不是prop，因此vue不会抛出错误，相当于绕过了vue对于不允许修改prop的检测机制。

父组件代码如下：

子组件代码如下：