Open yuanyuanbyte opened 2 years ago
本系列的主题是 Vue,每期讲解一个技术要点。如果你还不了解各系列内容,文末点击查看全部文章,点我跳转到文末。
如果觉得本系列不错,欢迎 Star,你的支持是我创作分享的最大动力。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
子组件想修改 prop 时,只能通过 $emit 派发一个自定义事件,父组件接收到后,由父组件修改。
$emit
这里有两种常见的试图变更一个 prop 的情形:
1. 这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data property 并将这个 prop 用作其初始值:
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
2. 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
在子组件直接用 v-model 绑定父组件传过来的 prop 这样是不规范的写法,开发环境会报警告:
v-model
prop
<input type="text" v-model="foo" > props: { foo: String, // foo作为props属性绑定 },
修改 input 里通过 v-model 绑定的 foo 值,vue会在浏览器的控制台中发出警告:
[Vue 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: "foo"
翻译过来就是:
[Vue 警告]:避免直接改变 prop,因为每当父组件重新渲染时,值都会被覆盖。可以改为,使用一个 data 或者 computed 基于 prop 的数据,Prop 发生变异的值为: "foo"
注意 ❗ ❗ ❗ 在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
查看全部文章
各系列文章汇总:https://github.com/yuanyuanbyte/Blog
我是圆圆,一名深耕于前端开发的攻城狮。
本系列的主题是 Vue,每期讲解一个技术要点。如果你还不了解各系列内容,文末点击查看全部文章,点我跳转到文末。
如果觉得本系列不错,欢迎 Star,你的支持是我创作分享的最大动力。
怎样理解 Vue 的单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
子组件想修改 prop 时,只能通过
$emit
派发一个自定义事件,父组件接收到后,由父组件修改。这里有两种常见的试图变更一个 prop 的情形:
1. 这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data property 并将这个 prop 用作其初始值:
2. 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
在子组件直接用
v-model
绑定父组件传过来的prop
这样是不规范的写法,开发环境会报警告:修改 input 里通过
v-model
绑定的 foo 值,vue会在浏览器的控制台中发出警告:[Vue 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: "foo"
翻译过来就是:
[Vue 警告]:避免直接改变 prop,因为每当父组件重新渲染时,值都会被覆盖。可以改为,使用一个 data 或者 computed 基于 prop 的数据,Prop 发生变异的值为: "foo"
注意 ❗ ❗ ❗ 在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
查看全部文章
博文系列目录
交流
各系列文章汇总:https://github.com/yuanyuanbyte/Blog
我是圆圆,一名深耕于前端开发的攻城狮。