*Share a link that has been used for a long time
background:
Using the element-ui component, I found that the el-popover component has a method: doClose(); the calling method is: this. refs [ name ]. do Close ( ); After testing, it is no problem to use it normally. Now I want to call it in the render function in the component, but I can't get this. refs[name].doClose(); after testing, it is no problem to use it normally. Now I want to call it in the render function in the component, but I can't get this.ref s [ nam e ] . d o Close ( ) ; After testing , it is no problem to use normally. Now I want to call it in the re n d er function in the component , but I can’t get t hi s . refs[name] and report undefined
Solutions:
- Add the vue-DevTools tool to check whether the element exists under the $refs attribute, analyze the location of the Dom element, and decompose it layer by layer
- Print this under the current render, and find that there is no relevant attribute of the current element, so: this points to no problem, but it is not our Dom element
- Understand the relationship and pointing issues of components created by Vue.component and render. Render is equivalent to creating a child component in the current parent component
- Solution: this.$refs[parent component ref name].refs[child component ref name]+method attribute
Code structure:
// 父组件TableList内的属性
<template>
<el-card class="auto-schedu-class">
<TableList border ref="TableList" :columns="columns(this)" />
</el-card>
</template>
<script>
const columns = that => [
{
render: (h, parmas) => {
return h(
"el-popover",
{
ref: "popover",
props: {
placement: "top",
width: "160"
}
},
[
h("p", "当前规则生效中，是否确认删除？"),
[
h(
"el-button",
{
props: {
type: "text",
size: "mini"
},
on: {
click: row => {
console.log(this, "-------------");
that.handleDeleteRow(row);
}
}
},
"取消"
),
h(
"el-button",
{
props: {
type: "text",
size: "mini"
}
},
"确定"
)
],
h(
"el-button",
{
props: {
type: "text",
size: "mini"
},
slot: "reference"
},
"删除"
)
]
);
}
}
];
export default {
data() {
return {
columns
};
},
methods: {
handleDeleteRow(row) {
console.log(this, "=======");
this.$refs.TableList.$refs.popover.doClose(); // 获取到子组件内的属性方法
}
}
};
</script>
Summary of vue-DevTools element level analysis:
- The author also read a lot of similar articles, but did not find a reasonable solution and analyze the article
- Through our vue tool, we disassemble the elements layer by layer, proving that our refs elements exist, so: a method of parsing and loading Dom and the hierarchical relationship is one of our thinking points, and many articles are attributed to the point of this , and the relationship between the creation of render and vue.component is our breakthrough point