组件的深入了解

柔光的暖阳◎ 2022-05-10 11:54 145阅读 0赞

1：组件注册：

\# 组件名问题：可以使用kebab-case、PascalCase两种命名方式。建议使用kabab-case。

\# 全局注册：通过Vue.component('xxx',\{...\})的方式注册的组件，可以用在任何Vue根实例的模板中。并且，多个组件在各自内部也可以相互使用（这一点待深入理解）。

注意，全局注册必须在根实例创建之前进行。

\# 局部注册：全局注册的组件有时不够理想。比如，使用webpack来构建时，全局注册的组件，不管不再使用了，它仍然包含在构建结果中。这时可以使用局部注册的方式。

局部注册的组件，组件之间不能直接调用。需要调用的话，在组件的定义对象中，使用components属性进行引用。

2：通过Props向子组件传递数据：

将Prop成为特性。

\# Prop：指的是可以在组件上注册的一些自定义特性。当一个值传递给一个Prop特性时，它就变成了组件实例的一个属性。组件定义时，通过props选项来将要定义的特性包含在该组件

可接受的prop列表中。如：props: \['aaa','bbb','ccc'\]。任何值都可以传递给任何prop。在组件实例中，可以访问这些值，如同访问data中的值一样。

\# Prop的大小写：HTML中的特性名是大小写不敏感的。浏览器会把所有大写字符解释为小写字符。所以，在使用DOM中的模板时，要使用kebab-case命名。而使用字符串模板的话，就没什么

限制。

\# Prop类型：前面都是使用字符串数组列出prop。如果希望每个prop都有指定的值类型时，可以以对象形式列出prop。这时，属性名和值对应prop各自的名称和类型。这样也可以进行类型检查

和其他的prop验证。

\# 传递静态或动态prop：在组件使用时，直接使用prop值作为属性，为静态传值。使用v-bind: 的形式为动态传值。需要注意，当传递的值是JavaScript表达式时，不要用静态传值方式。

使用v-bind:来告诉Vue，这是一个JavaScript表达式而非是一个字符串。否则，静态传递，例：<component-name aaa="false"></component-name>，aaa得到的不是布尔值，

而是一个字串"false"。 除了字符串外，可以传入数值、布尔值、数组、对象。

具体参考：[https://cn.vuejs.org/v2/guide/components-props.html\#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop][https_cn.vuejs.org_v2_guide_components-props.html_E4_BC_A0_E9_80_92_E9_9D_99_E6_80_81_E6_88_96_E5_8A_A8_E6_80_81-Prop]

\# 单向数据流：单向下行绑定：父级prop的更新会向下流到子组件中，反之不行。当每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。

注意，JavaScript中的复合数据类型，如数组和对象，都是通过引用传入的。所以，对于一个数组或对象类型的prop来说，在子组件中改变这个对象或数组本身，将会影响到父组件。

对于下面两种常见的，需要改变prop的情形，建议使用对应的解决方式：

1.prop用来传递一个初始值，子组件希望其作为本地的一个prop数据来使用。此时，最好定义一个本地的data属性，并将这个prop用作其初始值：

props: \['initialCounter'\],

data: function()\{

return \{

counter: this.initialCounter

2.prop以原始的值传入，并且需要进行转换。 此时，最好使用这个prop的值 来定义一个计算属性：

props:\['size'\],

computed: \{

normalizedSize: fucntion()\{

return this.size.trim().toLowerCase()

\# prop验证：为props中的值 提供一个带有验证需求的对象，而非字符串数组。

Vue.component('my-component', \{

props: \{

// 基础的类型检查 (\`null\` 匹配任何类型)

propA: Number,

// 多个可能的类型

propB: \[String, Number\],

// 必填的字符串

propC: \{

type: String,

required: true

\},

// 带有默认值的数字

propD: \{

type: Number,

default: 100

\},

// 带有默认值的对象

propE: \{

type: Object,

// 对象或数组默认值必须从一个工厂函数获取

default: function () \{

return \{ message: 'hello' \}

\},

// 自定义验证函数

propF: \{

validator: function (value) \{

// 这个值必须匹配下列字符串中的一个

return \['success', 'warning', 'danger'\].indexOf(value) !== -1

\})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

\# 类型检查

type 可以是下列原生构造函数中的一个：

*  String
 *  Number
 *  Boolean
 *  Array
 *  Object
 *  Date
 *  Function
 *  Symbol

另外，还可以是自定义的构造函数，会通过instanceof来进行检查。如：function Person(name)\{this.name = name\}

可以使用:props:\{

author: Person

这样来验证author prop的值是否是通过new Person创建的。

\# 非porp的特性：指的是传向一个组件，但该组件中并没有对应prop的特性。

prop用于向子组件传递信息，然而组件创作时，可能无法预想到全部情况。所以，组件被设计为可以接受任何的特性。这些特性会被添加到组件的

根元素上。这里根元素就是对应模板的最外层元素。一个组件只能有一个根元素。

\# 替换/合并已有特性（非prop）：组件中定义的特性（非prop），对于style 和class，如果特性和模板中的属性重名了，渲染后会将他们的值合并。

而对于其他的属性和特性重名的话，特性会替换属性。

\#禁用特性继承（非prop）：如果不希望组件的根元素继承特性，在组件定义时可以设置：inheritAttrs: false。这一点配合实例的$attrs属性使用较多。

$attrs属性包含了传递给一个组件的特性名和特性值。如：\{class:'username-input', placeholder:'Enter your username'\}

比如，在编写基础组件时，常会使用到。如下：

Vue.component('base-input', \{

inheritAttrs: false,

props: \['label','value'\],

template: \`<label>

\{ \{label\}\}

<input

v-bind='$attrs'

v-bind:value='value'

v-on:input='$emit('input', $event.target.value)'>

</label>\`

\})

3:自定义事件

\# 事件名：推荐使用kebab-case命名方式。

[https_cn.vuejs.org_v2_guide_components-props.html_E4_BC_A0_E9_80_92_E9_9D_99_E6_80_81_E6_88_96_E5_8A_A8_E6_80_81-Prop]: https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop