vue 中利用ref 获取dom 元素或子组件 调用子组件方法

1、使用this.$refs 获取dom元素

<div ref="box">abc</div>

获取上述div 中的文本
this.$refs.box.innerText   //输出abc

2、使用this.$refs 获取子组件

//cus-form 自定义表单组件
//message 消息弹框组件

<div v-for="(item, index) in list">
    <cus-form ref="form"></cus-form>
</div>
<message ref="message"></message>

获取的时候发现
this.$refs.form   返回的是一个数组
this.$refs.message 返回的是一个对象
原因:ref本身dom或者父级dom 中，有通过"v-for" 循环渲染的dom场景，vue框架会将refInFor 设置为true,然后ref.key 在registerRef函数中就被设置成了数组。

refInfo

3、在父组件中调用子组件的方法和属性 在第二点中，如果我们想要在父页面按钮点击的时候，对cus-form的表单内容进行校验，就需要调用表单内部的校验事件，写法如下：

CusForm.vue
<template>
...
</template>
<script>
export default {
    methods:{
        validForm(){
            ...
        }
    }
    
}
</script>

在父组件中调用
this.$refs.form[0].validForm();