Vue $refs无法操作element-ui组件

比如我要操作这个dom元素↓↓↓

<el-badge :value="1" :max="99" class="message">
    <i class="el-icon--left el-icon-chat-round"></i>回复我的
</el-badge>

我要修改“回复我的”字体为红色,会发现没有效果,通过控制台查看元素可以知道这个el-badge标签会被解析为这种结构↓↓↓

<div data-v-5e0adc2c="" class="el-badge message">
    <i data-v-5e0adc2c="" class="el-icon--left el-icon-chat-round"></i>回复我的
    <sup class="el-badge__content el-badge__content--undefined is-fixed">1</sup>
</div>

也就是说,直接在element-ui组件添加ref,$refs找不到这个dom,唯一的解决办法就是在“回复我的”套一层span标签,或者其他的原生html标签,再使用ref就会有效果了。

上一篇:Vue组件中通过refs获得子组件对象(常用)


下一篇:form 表单数字类型