【Vue基础篇】组件

组件详解

[success] 可在此处查看运行文档中的代码示例结果：https://github.com/jianyaoo/Vue

基本使用

我们在注册一个组件的时候都会给组件起一个组件名，起组件名的两种方式为kebab-case(全部都是小写字母，中间用-连接)和PascalCase（首字母大写）。当时用连字符的时候，可能使用连字符的方式进行调用。如果使用首字母大小写的方式，两种方式都可以调用。

全局注册组件

注册方式
使用Vue.component方式注册的组件都为全局注册组件，全局注册组件可以在任何新创建的Vue根实例模板中
代码实例

<h3>全局注册组件</h3>
<div>
<el-glob></el-glob>
</div>

Vue.component('el-glob',{
template:"<div>hello , component</div>"
})

运行结果：

全局注册组件

hello , component

### 实例内注册组件 ** 注册方式** 实例内注册即在Vue的实例内使用`component`属性进行注册的方式。 ** 代码实例** ~~~

实例内注册

~~~ ~~~ // 声明一个组件的属性 var local = { template: "

这是一个实例内注册的组件

" } // 在根实例中调用组件 var vm = new Vue({ el:"#app", components:{ "el-local":local } }) ~~~

运行结果：

实例内注册

这是一个实例内注册的组件

>[danger] component组件属性定义在哪个实例中，组件才可以在哪个实例中使用。而且子组件之间不可以直接调用，如果需要在子组件中调用另外一个子组件，需要在调用组件的属性中使用`component`属性 ### 特殊元素使用组件 ** 使用说明** 有一些元素内只能使用特定的元素，例如`table`、`ul`、`ol`等，如果直接在这些元素内使用组件，组件会渲染到父级外面从而得不到自己想要的效果。使用`is`属性可以解决在这些特定组件上使用组件。 ** 代码实例** ~~~

特殊元素使用组件

~~~ ~~~ Vue.component('el-glob',{ template:"hello , component" }) ~~~

运行结果：

特殊元素使用组件

hello , component

** 代码说明** 使用`is`后的代码结构如下： ```

	hello , component

``` 在不使用`is`时的代码结构为： ``` hello , component ``` ### 带数据的组件 ** 使用说明** 在组件模板中如果使用变量，需要在组件中单独使用`data`属性。需要说明的是在组件中的`data`属性不是一个对象，而是一个可以返回一个对象的函数。 ** 代码实例** ~~~

带数据的组件

~~~ ~~~ Vue.component('my-component' , { data:function() { return{ message:"这是一个带数据的组件" } }, template:"

{{message}}

" }) ~~~

运行结果：

带数据的组件

这是一个带数据的组件

### 组件独立数据 一个独立组件的数据，应该声明在组件内部，只供当前组件一个可以调用，而不能定义在组件外面。容易引起当组件重复使用时发生错误的情况，如下代码所示： ~~~

组件独立数据

反例

~~~ ~~~ var data = { counter:0 } Vue.component("el-data",{ data:function() { return data ; }, template:"

prop验证

当子组件接受到一个prop时，可以对prop进行验证，如果验证不通过的话会在控制台打印出警告信息。主要用于开发调试

Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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
}
}
}
})
~~~