vue --ref用法
按钮控制弹框显示的两种写法
1, 法一
<child-dialog :visible="visible"></child-dialog> // 在data里面定义visible
<div @click="visible = true">按钮</div>
2, 法二
<child-dialog ref="childDia" @childConfirm="childConfirm"></child-dialog>
<div @click="$refs.childDia.showAlert()">按钮</div>
// childConfirm,子组件传值
// showAlert(),子组件里的方法
注解: ref 有三种用法:
-
1、ref 加在普通的 DOM 元素上使用,引用this.ref.name 指向的就是 DOM 元素
-
2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法
-
3、当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组
-
4、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成,。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用
-
5、如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组,此时要拿到单个的ref 只需要循环就可以了