Vue06/v-model组件使用 Vue获取DOM元素ref和$refs及子组件实列

一. v-model组件使用

语法:

子组件:

props:[ 'value' ]

this.$emit( ' input ' , 参数1，参数2 )

父组件:

<子组件 v-model="calculate"></子组件>

注意:定义组件时候 注意接收的叫value 子传父触发的事件叫input

应用场景: 1.父组件提供一个数据给子组件使用 2.子组件需要修改父组件传过来的这个数据 所以需要子传父把值传给父组件

语法过程介绍:

1.子组件

(1) props定义value的属性

(2) 数据改变的时候通过 this.$emit('input',新的数据)

2.只要子组件满足上面的条件 父组件就可以直接简写为v-model

(1) v-model用于组件: 快速实现props父传子 和 $emit子传父

v-model场景应用介绍:

1. v-model用于表单: 快速获取/设置表单的值

2. v-model用于组件: 快速实现props父传子和 $emit子传父

v-model语法糖:

语法糖: v-model的作用: 提供数据的双向绑定

数据发送了改变页面会自动变 :value

页面输入改变 数据会自动变化 @input

v-model是语法糖 v-model相当于 给一个input框提供了 :value属性以及@input事件

因为每次使用input框 都需要提供value和input事件 比较麻烦 所有 v-model

二.ref和$refs

在javascrip中需要通过document.querySelector("")来获取dom节点,然后在获取这个节点的值，在Vue中，我们不用获取dom节点 元素绑定ref之后 直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗

(1) ref 介绍: ref被用来给元素或子组件注册引用信息，引用信息将会注册在$refs对象上，如果是在普通DOM元素上使用，引用指向的就是DOM元素，如果是在子组件上,引用就指向组件的实列

ref特征就是为元素或子组件赋予一个ID引用，通过this.$refs.ref内名字 来访问元素或子组件的实列

(2) this.$refs介绍: this.$refs是一个对象 持有当前组件中注册过 ref 特征的所有DOM元素和子组件实列

注意:$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且他是非响应式的，因此不能用它在模块中做数据绑定

注意: 当ref和v-for一起时，获取到的引用将会是一个数组 包含循环数组源

1.ref和$refs获取DOM元素

语法:

<标签ref="自定义属性名"> </标签>

this.$refs.自定义属性名

2. ref和$refs获取子组件内方法

语法:

<子组件ref="自定义属性名"> </子组件>

this.$refs.自定义属性名.子组件内方法名()

作用:

ref和refs配合使用能获取DOM 或 组件对象

ref和$refs使用方法 给目标元素添加ref属性 this.$refs.名字 获取内容

拿到组件对象可以调用组件里的属性方法

注意:

1.如果ref是给原生dom添加 则获取的也是原生dom对象

2. 如果ref是给组件添加 ， 则获取的是组件的Vue实列对象