Component (组件) 进阶

Component (组件) 进阶

Component 是非常常见的，在我们的Web开发中，只要是生产环境的项目，就一定会有Component.

下面就是我们的一个实际项目中的例子，这个项目我们只做了两个月，里面就发展到了32个component. 如下图所示：

很多时候，我们甚至会看到一个 component 中嵌套着另一个，这个component再嵌套另外5个….

例如：

popup-picker 这个component中，看起来是这样的:

<template>
  <div>
      <popup
          class="vux-popup-picker"
          :id="`vux-popup-picker-${uuid}`"
          @on-hide="onPopupHide"
          @on-show="onPopupShow">
          <picker
              v-model="tempValue"
              @on-change="onPickerChange"
              :columns="columns"
              :fixed-columns="fixedColumns"
              :container="'#vux-popup-picker-'+uuid"
              :column-width="columnWidth">
          </picker>
      </popup>
  </div>
</template>
<script>
import Picker from '../picker'
import Popup from '../popup'
...
</script>

可以看到，这个component中，还包含了另外两个，一个是popup, 一个是 picker.

这个时候，新人往往会眼花缭乱。如果看到 this.$emit ，就更晕了。

所以，要做好实际项目，同学们一定要学好本章。

Component 命名规则

每个component 的命名，官方建议使用小写字母 + 横线的形式，例如：

Vue.component('my-component-name', { /* ... */ })

这个是符合W3C的规范的。

也可以定义为：

Vue.component('MyComponentName', { /* ... */ })

这个时候，可以使用 <MyComponentName/> 来调用，也可以使用 <my-component-name/> 来调用。

Prop 命名规则

同 component，建议使用小写字母 + ‘-‘ 连接。

Prop 可以有多种类型。

下面是一个例子，可以看出，一个component的 prop 可以有多种类型，包括：字符串，数字，bool, 数组，和 Object.

props: {
  title: "Triple Body",
  likes: 38444,
  isPublished: true,
  commentIds: [30, 54, 118, 76],
  author: {
      name: "Liu Cixin", 
      sex: "male"
  }
}

可以动态为 prop 赋值

例如，这是个静态的赋值：

<blog-post title="Vuejs的学习笔记"></blog-post>

这是个动态的赋值：

// 1. 在script中定义
post = {
    title: 'Triple body',
    author: {
        name: "Big Liu",
        sex: 'male'
    }
}
// 2. 在模板中使用。 
<blog-post v-bind:title="post.title + 'by' + post.author.name"></blog-post>

赋值的时候，只要是符合标准的类型，都可以传入（包括String, bool, array 等）.

使用Object来为Prop赋值

假设，我们定义有：

post = {
    author: {
        name: "Big Liu",
        sex: 'male'
    }
}

那么，下面的代码：

<blog-post v-bind:author></blog-post>

等价于：

<blog-post v-bind:name="author.name" v-bind:sex="author.sex"></blog-post>

单向的数据流

当“父页面” 引用一个“子组件”时，如果父页面中的变量发生了变化，那么对应的“子组件”也会发生页面的更新。

反之则不行。

Prop的验证

Vuejs 的组件的Prop , 是可以被验证的。如果验证不匹配，浏览器的 console就会弹出警告（warning). 这个对于我们的开发非常有利。

我们下面的代码：

Vue.component('my-component', {
    props: {
        name: String,                    
        sexandheight: [String, Number],
        weight: Number,
        sex: {
            type: String,
            default: 'male'
        }
    }
})

可以看得出，

name: 必须是字符串sexandheight: 必须是个数组。第一个元素是String, 第二个元素是Numberweight: 必须是Numbersex: 是个String, 默认值是 ‘male’

支持的类型有：

String
Number
Boolean
Array
Object
Date
Function
Symbol

Non Prop (非Prop) 的属性

很多时候，component的作者无法预见到应该用哪些属性，所以Vuejs在设计的时候，就支持让 component接受一些没有预先定义的 prop. 例如：

Vue.component('my-component', {
    props: ['title']
})
<my-component title='三体' second-title='第二册： 黑暗森林'></my-component>

上面的 title 就是预先定义的 “Prop”, second-title 就是“非Prop”

我们想传递一个 non-pro, 非常简单， prop 怎么传， non-prop 就怎么传。

对于Attribute的合并和替换

如果component中定义了一个 attribute, 例如：

<template>
    <div color="red">我的最终颜色是蓝色</div>
</template>

如果在引用了这个“子组件”的“父页面”中，也定义了同样的attribute, 例如：

<div>
    <my-component color="blue"></my-component>
</div>

那么，父页面传递进来的 color="blue" 就会替换子组件中的 color="red"

但是，对于 class 和 style 是例外的。对于上面的例子，如果attribute换成 class, 那么最终component中的class的值，就是 “red blue” (发生了合并)

避免子组件的attribute 被父页面所影响

根据上面的小结，我们知道了 “父页面”的值总会“替换” “子组件”中的同名attribute .

如果不希望有这样的情况的话，我们就可以在定义 component的时候，这样做：

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

component 进阶知识