组件详解

Edit me

基本用法

props中声明的数据与data函数返回的数据的同异点

• props来自父级，data是组件自己的数据，作用域是组件本身
• 都可以在模板template、计算属性computed及methods中使用

如果要传递多个数据，在props数组添加项即可。

kebab-case和camelCase的选择

HTML 的特性是不区分大小写，当使用 DOM 模板时，驼峰命名的 props 名称要转换成短横命名。

传递动态数据到子组件

以文本输入框<input type="text">为例，需要做的事情是：

1. 在文本输入框用v-model将输入内容绑定到数据favBook。

2. 在父级的<my-component>标签上，将favBook的值绑定到一个自定义属性上，比如:favorite="favBook"。

3. 子组件的接收props，就完成了。

用v-bind传递prop

示例

如果要直接传递数字、布尔值、数组、对象，要使用v-bind来给子组件传递数据。所以为了避免混淆，即使传递字符串，建议也用v-bind。

单向数据流

Vue 1.x 中，通过props传递数据支持双向数据流。为了避免子组件无意中修改父组件的状态，需要尽可能将父子组件解耦，因此v2.x中只支持通过props来让父组件单向传递数据给子组件。

业务中，经常会碰到两种需要改变prop的情况。

1. 第一种做法是父组件传递prop到子组件，子组件将它作为初始值保存到自身的某个数据中，在自己的作用域下任意使用和修改。

2. prop作为需要被改变的原始值保存到子组件的一个计算属性中。

以上示例，请点击这里。

上面这个Note提示我并不明白到底怎么回事 = =

数据验证

之前的介绍里，props都是一个数组。但是当牵涉到数据验证时，props必须是对象。

《Vue.js》中的范例

验证的 type 类型有：

• String

• Number

• Boolean

• Object

• Array

• Function

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