vue中元素上加上ref属性取值，相当于取整个元素的，和$(“#id”)类似。但是要用此属性需要了解加载的时间，从官网上可以看到
关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
一般用法就是在mounted方法中加入this.$nextTick
具体例子
<el-input ref="childShow" />
mounted() {
this.$nextTick(() => {
if (this.$refs.childShow !== undefined) {
this.$refs.childShow.setTree('0000', '', '')
}
})
}
但是如果$refs在el-dialog中用上述方法还是会undefined
解决的方法就是在el-dialog中加入回调函数@open，然后在回调函数方法中用this.$nextTick。
例如：
<template>
<el-dialog title="Dialog Title" :visible.sync="dialogVisible" ref="myDialog">
<my-component ref="myComponent"></my-component>
</el-dialog>
<el-button @click="openDialog">Open Dialog</el-button>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
openDialog() {
this.dialogVisible = true;
this.$nextTick(() => {
// 通过refs访问el-dialog和my-component的实例
const dialog = this.$refs.myDialog;
const component = this.$refs.myComponent;
// 可以调用el-dialog的方法或访问属性
// 例如：dialog.methodName();
// 可以调用my-component的方法或访问属性
// 例如：component.methodName();
});
}
}
};
</script>
