按鈕控制彈框顯示的兩種寫法
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 只需要迴圈就可以了