ref 用法:
1、ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素
2、ref 加在子组件上,用this.$refs.(ref值)获取到的是组件实例 ,可以使用组件的所有方法 。 在使用方法的时候直接this.$refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值).方法 就可以使用了。
示例:在组件中使用:
1、在父组件中引入的Dialog对话框组件
<!-- 对话框 -->
<Dialog v-if="dialogFormVisible" ref="dialogForm" @close="close"></Dialog>
// 编辑
handleEdit(index, row) {
this.dialogFormVisible = true
// 当前行的数据 回显需要
//异步更新
this.$nextTick(() => {
//使用this.$ref.值.方法
this.$refs.dialogForm.handleEdit(row)
})
},
2、在子组件中可以直接使用组件上的handleEdit方法:
// 编辑回显
handleEdit(row) {
this.isEdit = true
this.dialogFormVisible = true
this.ruleForm = row
},