【Vue开发实战课后题】子组件为何不可以修改父组件传递的props？

在 Vue 中，子组件为何不可以修改父组件传递的 Prop，如果修改了，Vue 是如何监控到属性的修改并给出警告的。

一、为何不可以修改伏组件传递的Prop？

因为Vue是单向数据流，为了保证数据的单向流动，便于对数据的追踪，出现了错误可以更加迅速的定位到错误发生的位置。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

二、Vue是如何监控属性修改并给出警告的？

在组件 initProps 方法的时候，会对props进行defineReactive操作，传入的第四个参数是自定义的set函数，该函数会在触发props的set方法时执行，当props修改了，就会运行这里传入的第四个参数，然后进行判断，如果不是root根组件，并且不是更新子组件，那么说明更新的是props，所以会警告

if (process.env.NODE_ENV !== 'production') {var hyphenatedKey = hyphenate(key);if (isReservedAttribute(hyphenatedKey) ||config.isReservedAttr(hyphenatedKey)) {warn(("\"" + hyphenatedKey + "\" is a reserved attribute and cannot be used as component prop."),vm);}defineReactive$$1(props, key, value, function () {if (!isRoot && !isUpdatingChildComponent) {warn("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: \"" + key + "\"",vm);}});
}

需要注意，当从子组件修改的prop属于基础类型时会触发提示。这种情况下，你是无法修改父组件的数据源的，因为基础类型赋值时是值拷贝。当修改引用类型的属性时不会触发提示，并且会修改父组件数据源的数据。

【Vue开发实战课后题】子组件为何不可以修改父组件传递的props？相关推荐

vue 子页面调用父页面的参数_Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图父级组件实现在父级组件中写一个_editParentText的方法来修改组件中 ...
vue通过子组件修改父组件prop的几种实现方式
目录前言常用方式 1. 通过父组件on监听子组件emit事件实现修改prop 2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop 取巧方式 3.通过data实现修改prop 4 ...
唐金州的Vue开发实战学习笔记（基础篇）
Vue开发实战学习笔记简易的Vue程序组件事件插槽单文件组件双向绑定虚拟DOM与key属性组件更新状态data与属性props vue的响应式更新计算属性和侦听器计算属性 com ...
唐金州的Vue开发实战学习笔记（生态篇）
Vue开发实战学习笔记 Vuex Why Vuex How Vuex Vuex的核心概念和底层原理 Vuex的最佳实践 Vue Router Why Vue Router 路由类型及底层原理 Nuxt ...
[vue] 在子组件中怎么访问到父组件的实例？
[vue] 在子组件中怎么访问到父组件的实例? 通过this.$parent 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前 ...
vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
VUE子组件如何改变父组件传来的值，以及VUE子组件如何修改父组件的值，以及父组件修改子组件的值
一)子组件修改父组件传来的值: 父组件传递给我一个名为deptName数据,但是现在我要在子组件中修改它的值并且实时更新页面,直接this.deptName是不能直接修改他的值的,所以我采用了使用一个 ...
【Vue 开发实战】实战篇 # 42：如何定制主题及动态切换主题
说明 [Vue 开发实战]学习笔记. vuecli3 配置 module.exports = {css: {loaderOptions: {less: {modifyVars: {'primary-c ...
Vue 子组件修改父组件值的解决方法
分析 vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样可以防止子组件意外改变父组件的值,怕子组件污染父组件,造成不可控: 此外,每次父组件的数据发生更新时,子组件的 ...

【Vue开发实战课后题】子组件为何不可以修改父组件传递的props？

【Vue开发实战课后题】子组件为何不可以修改父组件传递的props？相关推荐

最新文章

热门文章