组件

使用组件的原因

可以极大的提高代码的复用性

组件的使用方法

全局：

Vue.component(tag,{
    template:'<div></div>'
})

局部：

//局部注册
components: {
    'app-component': {
    template: '<div>我是局部</div>'
}

全局注册：
优点：所有Vue实例都可以用
缺点：权限太大，容错率低，不能使用驼峰式命名

---

Vue组件的模板在某些情况下会受到HTML标签的限制，比如在<table>中只能有<tr>,<td>,<tbody>，直接在table中使用组件是无效的，可以用is属性来挂载组件

<table>
    <tbody is='isTable'></tbody>
</table>

---

小技巧

• 使用小写字母加-的方式进行命名
• template的内容必须被DOM元素（标签）包裹，可以嵌套
• 在组件定义中，除了template外还可以使用vue实例中的methods，data，computed
• data必须是一个function

---

父组件向子组件传递

通过props传递数据是单向的，也就是父组件可以传递给子组件，但是子组件变化不会传递给父组件

两种应用场景
一、： 父组件传递初始值进来，子组件将初始值保存起来，在自己的作用域下可以随意使用和修改，这种情况可以在组件data内再声明一个数据，引用父组件的props
步骤：
1.注册组件
2.将父组件的数据传递进来，并在子组件中用props接收
3.将传递进来的数据通过初始值保存起来

• props接收参数，在props中定义的属性，都可以在组件中直接使用
• props来自父级，而组件中的date return的数据就是组件自己的数据，两种情况作用域就是组件本身，可以在template，complete，methods中直接使用
• props的值有两种，一种是字符串数组，一种是对象
  二、：prop作为需要被转变的原始值传入，这种情况用计算属性就可以了
  步骤：
  1.注册组件
  2.将度组件的数据传递进来，并在子组件中用prop接收
  3.将传递进来的数据通过计算属性进行重新计算

数据验证

命名（驼峰式命名和与短横线命名）

• 在html中所有大写都会转换成小写，不允许使用驼峰
• 在组件中，父组件给子组件传递数据，必须用短横线，在template组件中，必须使用驼峰，若用短横线命名，会直接报错
• 在组件的data中，用this.xxx引用时，只能是驼峰命名方式，若为短横线命名会报错

---

验证的type类型可以是：

• String
• Number
• Boolean
• Object
• Array
• Function

数字
→验证类型时props是一个对象

props：{
  num：Number//如果是一个数字类型的就会输出
}

→如果可以同时是几个类型，只需添加一个数组

props:{
  a: [Number,String]

→如果指定类型，同时有很多选项（type【类型】-require【是否必传】-default【指定默认值】），要用对象

props:{
  a: {
    type: Boolean,
    default: true
}

数组
→数组的默认值用函数return出来

props:{
  a:type:Array,
  default:function(){
    return [***]
  }
}

自定义一个验证函数validator

props:{
  validator:function(value){
    return value>10//假如定义的是一个数字，用来判断
  }
}