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无法操作element-ui组件

原文：https://www.cnblogs.com/kongsam/p/14483409.html