vue笔记(3)- 组件(注册组件、prop)

原创 乘风逐月 随笔 Vue 235阅读 2018-04-24 14:58:01 举报

一、如何使用组件

1.全局注册一个组件

注: 全局组件在任何实例中都可以使用。要在实例中使用全局组件,必须在初始化根实例之前注册组件,否则会报错

2.注册一个局部组件

注:局部注册的组件只能在其实例中使用,当全局组件与实例组件重名时,会优先使用局部组件。

3.组件的data选项必须是一个函数

当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象! 通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象
例如:

这时点击 button ,每个按钮的 counter 都是一样的,因为三个组件实例共享了同一个 data 对象,因此递增一个 counter 会影响所有组件。
修改一下: 可以通过为每个组件返回全新的数据对象来修复这个问题,每个counter组件都有自己的状态。

二、组件组合

组件最常见的关系是父子组件关系:组件A在其模板中使用了组件B。它们之间必然需要相互通信:父组件给子组件下发数据,子组件则将内部的事件告知父组件。
Vue中,父子组件的关系总结为:父组件通过prop向子组件传递数据,子组件通过事件向父组件发送消息。

1.使用Prop传递数据

组件的作用域是孤立的,不能在子组件模板内直接使用父组件的数据。父组件的数据需要通过prop才能下发到子组件中。
子组件要显示地使用prop选项声明它预期的数据:

2. prop命名

a. camelCase(驼峰式)
b. kebab-case(短线分隔式)

HTML 特性是不区分大小写的。所以camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)。

对于字符串模板,没有这个限制。

3.动态Prop

a. prop静态的传值:

b. prop动态传值
与绑定到任何普通的HTML特性相类似,可以用 v-bind 来动态的将 prop 绑定到父组件的数据。每当父组件的数据变化时,该变化也会传递给子组件

4.字面量语法 vs 动态语法

要传递 JavaScript 表达式,而不是字符串时,需要动态语法 v-bind。prop 可以接受任何类型的值。
a.传入一个数字

b.传入一个布尔值

c. 传入一个数组

d.传入一个对象

e. 传入一个对象的所有属性

5.单向数据流

prop是单向绑定的当父组件属性变化时,将传导给子组件,但反过来不会。这是为了防止组件无意间修改了父组件的状态,避免应用的数据难以理解。
每次父组件更新时,子组件的所有prop都会更新为最新值。这意味不应该在子组件内部改变prop,如果做了,Vue会在控制台发出警告。

有两种情况很容易去修改prop的数据:
(1)prop作为初始值传入后,子组件想把它作为局部数据来用。

正确的应对方法是:定义一个局部变量,并用prop的值初始化它:
修改为:

(2)prop作为原始数据传入后,由子组件处理成其他数据输出:

正确的做法是:定义一个计算属性,处理 prop 的值并返回

注: 在 JavaScript 中对象和数组是通过引用传递的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变对象或者数组本身,将会影响到父组件的状态。

6.prop验证

组件的prop可以指定验证规则,如果传入组件的数据不符合要求,Vue 会抛出警告 (如果使用的是开发版本)。
要指定验证规则,需要用对象的形式来定义prop,而不能用字符串数组

prop的类型type可以是原生构造器:String,Number,Boolean,Function,Object,Array,Symbol
也可以是一个自定义构造器函数,使用 instanceof 检测。

注: prop 会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用

7.非 Prop 特性

所谓非prop特性,就是指它可以直接传入组件,而不需要定义相应的prop。

例如:假设我们使用了第三方组件 bs-date-input,它包含一个 Bootstrap 插件,该插件需要在 input 上添加 data-3d-date-picker 这个特性。这时可以把特性直接添加到组件上 (不需要事先定义 prop):
<bs-date-input data-3d-date-picker="true"></bs-date-input>
添加属性 data-3d-date-picker="true" 之后,它会被自动添加到 bs-date-input 的根元素上。

8.替换/合并现有特性

假设这是 bs-date-input 的模板:

为了给该日期选择器插件增加一个特殊的主题,我们可能需要增加一个特殊的 class,比如:

在这个例子当中,我们定义了两个不同的 class 值:
form-control,来自组件自身的模板
date-picker-theme-dark,来自父组件

对于多数特性来说,传递给组件的值会覆盖组件本身设定的值。即例如传递 type="large" 将会覆盖 type="date" 且有可能破坏该组件。但对于 class 和 style 特性都做合并 (merge) 操作,让最终生成的值为:form-control date-picker-theme-dark。

9. 禁用继承特性

不希望组件的根元素继承特性,可以在组件的选项中设置 inheritAttrs: false

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复