1. vue 是单向数据流,也就是数据总是从父组件传递到子组件中,子组件无权修改父组件中的数据。因为当父组件 可能存在多个子组件,假如子组件可以修改父组件的数据,那么会导致其他依赖父组件的子组件都会受到影响。
2. vue props 属性用于父组件 给子组件传值,子组件无权改变props中的数据值,否则props 会提示报错
在父组件中引入vale
父组件 value值为 111s
子组件更改value报错
报错
3. vue 中 v-model 是一种语法糖,它等于 props + 事件回调更改
<input v-model="someValue" /> 等价于如下
<input :value="someValue" @input="something = $event.target.value" />
注意:通过事件去更改父组件中数据,而不是直接在子组件中直接更改 父组件的数据。官方文档中如下说明:
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解
如何在子组件中更改props中的值呢?有如下两种方案:
(1)在data中重新复制,相当于制作了一个props值的一个副本
点
(2)通过计算属性计算出一个新值