Vue-2-表单、组件

一、表单

1.1双向数据绑定v-model（vue独有的功能，其他框架都没有）

v-model相当于替代了value的属性，但是它更高级，因为双向操作，改变data里的数据，input框的值跟着变，改变input框里的值，data里的数据也跟着变，这个功能是vue独有的，react都没有，很强大。

上下跟着变

1.2 ref取名

有时不想用双向绑定，只是想获得输入框的值

失去焦点获得输入框的值，自己取名叫myInput，类似于原生js操作节点来获取值；不仅仅只能拿到输入框的值，可以拿到任何元素的值，@refs.自己取的名字+元素

1.3 复选框

1.3.1 单个复选框

通过v-model来控制选不选中

1.3.2 多个复选框

通过判断value的值和isChecked数组里的值相不相等来判断选没选中

1.4 单选框

通过value值与picked是否相等来判断是否被选中

1.5 下拉列表

通过父级元素select中的v-model的值来，来决定谁被选中和获取选中的值，v-model都是双向选择

二、组件

有一部分代码会复用，把它变成一个组件，就可以随时调用，不用复制粘贴了

2.1 注册（全局）组件（创建组件）

组件注册要放到new Vue之前去写

名字用小横线是可以的，如my-com，但是小驼峰会报错，因为html里是没有大写的，即使你写的是myCom，但是标签上还是识别的mycom，会找不到大写的C而找不到组件

2.2 data（除了el，其他属性都可以写到组件中去）

各种属性用法跟在vue实例中是一样的，以后不会把过多的东西写到vue实例中去，而是分配到各个组件中去

注意一点，如果想让组件中包含多个标签，必须用一个框框包住所有的标签，template属性只能有一个儿子

注意：加入组件之后，data不能是对象，只能是函数，原因：组件可以使用多次，如果data是对象，修改一个data，其他组件会受影响，而用方法返回可以是不同的data，其他复用的组件不受影响

2.3 作用域

现在创建的是全局组件，意思就是当前页面都可以使用，而vue实例可以有多个，全局的意思就是在所有实例中这个组件都可以被使用

2.4 局部组件

vue实例中有一个属性为components，去注册这个实例自己用的组件，注意这个带s哦，全局变量不带s

2.5 组件嵌套使用（指全局变量，局部变量之能自己用，不存在嵌套概念）

注意：嵌套是在组件中嵌套的，不是在html页面中

2.6父组件给子组件传值

2.6.1 数组写法

2.6.1.1 基础用法（传的都是字符串）

2.6.1.2 除了字符串的其他类型

基础用法传的都是字符串，除了字符串以外的布尔值，数字类型等等都要加：，也就是v-bind，让它成为动态绑定的

2.6.1.3 从data里面取值

2.6.2 对象写法

通过定义类型来接收，不是这个类型的无法接收

还可以这样写，type就是上面的定义类型，default就是如果上面没有传值了，我就用这个默认值

注意：如果设定的类型是object或array（对象或数组）时，设置默认值时必须通过返回对象或数组的方式来写

return和{}可省略，要能看懂

2.7 子组件给父组件传值

• 自定义事件（函数方法）

官方没有提供子组件给父组件传值，只能自定义实现

2.7.1 父组件传递一个方法给子组件

father就是自定义事件

2.7.2 子组件调用父组件传递的方法

通过儿子自带的点击事件触发自定义事件father

2.7.3 子组件通过调用父组件传递过来的方法，通过给方法传值来传值给父组件

2.7.4 注意

可以写在标签里面，也可以写在儿子自己的methods方法里面来触发父亲的方法

注意一点：用自己的方法来触发父组件方法必须加this.

2.8 兄弟组件间传值

比如三个组件间没有父子关系，但互相需要用到对方的数据，怎么传值？

用一个更大的父组件把这三个组件包起来，需要复用的数据都写在外面的大组件里面，哪个儿子想用数据，就通过父组件给子组件传值的方式给这三个儿子传值

三、props验证