Vue第五天

v-model

原理：相当于在input上绑定了：value和@input

特点：会根据绑定的不同表单元素自动切换绑定的属性和方法

在组件上的使用：

1、父组件：在子组件标签上绑定v-model

2、子组件：

1）props：{value:XXX} this.$emit("input",XXX)

2）子组件想实现v-model双向数据绑定，定义的props和emit也可以不用交value和input

----通过配置model：{}【1、prop：新的属性名2、event：新的方法名】

ref

作用;获取原生dom元素，获取组件的实例

写法：

1、在标签上添加ref="自己起的名字"

2、在适当的时机，通过this.$refs，你起的名字获取dom实例或者组件实例

用处：

1、调用组件内的属性方法

2、通过获取dom，添加一些dom的属性

$nextTick

作用：用来获取更新之后的dom元素

原理：

1、vue中dom更新是异步的

2、获取更新之后的dom需要在异步的方法中获取

动态组件

作用：替换页面中的组件

写法：通过<compuonent :is="组件名"> 实现动态组件

指令

作用：

封装的操作dom的方法

写法：

1、局部定义：

在组件内部通过directive属性定义

【

   1、directive：{指令名：{inserted（el，binding）{}}}

    2、参数el代表，绑定的dom元素

    3、参数binding代表绑定值的对象

】

2、全局定义：

在main.js中定义-----写法同上

update---当绑定的值改变的时候需要通过update进行修改dom

插槽

默认插槽

用法：

1、子组件中通过<slot>占位

2、父组件中通过向组件标签夹住的地方插入dom

具名插槽

用法：

1、子组件中给slot标签绑定name

2、父组件中通过<template>标签包裹需要传入的dom元素，给template添加v-slot：slot的名字

用途：

需要向组件内不需要的地方插入结构的时候使用

作用域插槽：

用法：

1、子组件中给slot标签添加自定义属性

2、vue会自动将这些属性合并到一个对象

3、父组件中，通过在名字的后面加上="obj"获取子组件中的插槽里面的内容

用途：

当向子组件中插入元素的同时还需要渲染子组件中的数据的时候可以使用作用域插槽