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 有三種用法：   

• 一、ref 加在普通的 DOM 元素上使用,引用this.ref.name 指向的就是 DOM 元素  

• 二、ref 加在子組件上,用this.ref.name 獲取到的是組件實例,能夠使用組件的全部方法   

• 三、當 v-for 用於元素或組件的時候,引用信息將是包含 DOM 節點或組件實例的數組

• 四、ref 須要在dom渲染完成後纔會有,在使用的時候確保dom已經渲染完成,。好比在生命週期 mounted(){} 鉤子中調用,或者在 this.$nextTick(()=>{}) 中調用

• 五、若是ref 是循環出來的,有多個重名,那麼ref的值會是一個數組,此時要拿到單個的ref 只須要循環就能夠了