*Compartir un enlace que se haya utilizado durante mucho tiempo.
fondo:
Usando el componente element-ui, descubrí que el componente el-popover tiene un método: doClose(); el método de llamada es: this.refs [ nombre]. do Close (); después de probarlo, no hay problema en usarlo normalmente. Ahora quiero llamarlo en la función de renderizado del componente, pero no puedo obtener refs[nombre].doClose(); después de probarlo, no hay problema para usarlo normalmente. Ahora quiero llamarlo en la función de renderizado del componente, pero no puedo conseguirlo.ref s [ nombre ] .d o Close ( ) ;Después de la prueba , no hay problema para usarlo normalmente . Ahora quiero llamarlo en la función render en el componente , pero no puedo obtener este refs [nombre] y reportar indefinido
Soluciones:
- Agregue la herramienta vue-DevTools para verificar si el elemento existe bajo el atributo $ refs, analice la ubicación del elemento Dom y descompóngalo capa por capa.
- Imprima esto bajo el renderizado actual y descubra que no hay ningún atributo relevante del elemento actual, por lo que: esto no indica ningún problema, pero no es nuestro elemento Dom.
- Comprender la relación y los problemas de señalización de los componentes creados por Vue.component y renderizar. Renderizar es equivalente a crear un componente secundario en el componente principal actual.
- Solución: this.$refs[nombre de referencia del componente principal].refs[nombre de referencia del componente secundario]+atributo de método
Estructura del código:
// 父组件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>
Resumen del análisis a nivel de elementos de vue-DevTools:
- El autor también leyó muchos artículos similares, pero no encontró una solución razonable y analizó el artículo.
- A través de nuestra herramienta vue, desmontamos los elementos capa por capa, demostrando que nuestros elementos refs existen, por lo que: un método de análisis y carga de Dom y la relación jerárquica es uno de nuestros puntos de pensamiento, y muchos artículos se atribuyen al punto de Esto y la relación entre la creación de render y vue.component es nuestro punto de avance.