vue.js初入门——十一组件-中篇

在 Vue 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。

使用Props传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”:

举个栗子:

camelCase(驼峰命名法) vs. kebab-case(短横线命名法)

因为HTML 特性不区分大小写。当使用非字符串模版时,名字形式为 camelCase(驼峰命名法) 的 prop 用作特性时,需要转为 kebab-case(短横线命名法)(短横线隔开):

动态 Props

类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 props 到父组件的数据。每当父组件的数据变化时,也会传导给子组件:

字面量语法 vs 动态语法

初学者常犯的一个错误是使用字面量语法传递数值:

因为它是一个字面 prop ,它的值以字符串 “1”。如果想传递一个实际的数字,需要使用 v-bind ,从而让它的值被当作 JavaScript 表达式计算:

单向数据流

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了,Vue 会在控制台给出警告。

通常有两种改变 prop 的情况:

prop 作为初始值传入,子组件之后只是将它的初始值作为本地数据的初始值使用;

prop 作为需要被转变的原始值传入。

更确切的说这两种情况是:

定义一个局部 data 属性,并将 prop 的初始值作为局部数据的初始值。

定义一个 computed 属性,此属性从 prop 的值计算得出。

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

Prop 验证

组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告。当组件给其他人使用时这很有用。

prop 是一个对象而不是字符串数组时,它包含验证要求:

type 可以是下面原生构造器:

String

Number

Boolean

Function

Object

Array

type 也可以是一个自定义构造器,使用 instanceof 检测。

当 prop 验证失败了, Vue 将拒绝在子组件上设置此值,如果使用的是开发版本会抛出一条警告。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180521A1Q3Y900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券