组件之间的通信之父传子
基本用法
通常情况下父组件的模板中包含子组件。子组件接受到来自父组件传递的参数或数据以后,根据接收值进行页面的渲染或者操作。这个正向传递数据的过程就是通过 props 来实现的。
props来声明需要从父组件接收的数据(props的值一般是字符串数组或者对象)。
v-bind动态绑定props的值
用 v-model 绑定了父组件的数据 parentMessage ,当在输入框输入任意值时,子组件接收到的 props “message” 也会实时响应,并更新组件模板。
单向数据流
Vue 2.x 通过 props 传递数据是单向的,换句话说就是父组件数据变化会传递给子组件,而子组件的变化不能影响到父组件。这样有一个好处就是避免了子组件无意修改了父组件的状态。
1.业务中遇到两种需要改变 prop 的情况,一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己作用域下随意使用和修改。
组件中声明了数据 count ,它在组件初始化时会获取来自父组件的 initCount ,之后就与它无关了,只用维护 count ,这样就避免了直接操作 initCount。
2.另一种是 prop 作为 需要被转变的原始值 传入。
在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,所以 props 是对象和数组是,在子组件内改变是会影响父组件的。
数据验证
prop 验证时,需要对象写法,一般组件需要提供给别人使用时,推荐都进行数据验证。