vue妙用ref父组件访问子组件中的值和调用子组件的方法

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 只需要循环就可以了