父组件中通过$refs选择子组件中特定类名元素并修改其样式
刚开始是想通过父组件修改element-ui中的某个元素的样式。由于动态添加class不够方便,所以想通过$refs,根据类名选择出元素,做法如下App.vue<template><div><Student ref="student"></Student><button @click="changeColor">改变背景</butt
·
刚开始是想通过父组件修改element-ui中的某个元素的样式。由于动态添加class不够方便,所以想通过$refs,根据类名选择出元素,做法如下
App.vue
<template>
<div>
<Student ref="student"></Student>
<button @click="changeColor">改变背景</button>
</div>
</template>
<script>
import Student from './components/Student';
export default {
components: { Student },
methods: {
changeColor() {
// 通过$refs选择子组件,$el选择元素数组,
// 每个元素中有className是类名字符串(如'son1 son2')
// 通过遍历循环判断出对应的元素,然后通过style修改
this.$refs.student.$el.childNodes.forEach((item) => {
if (item.className.indexOf('el-button--default') !== -1) {
item.style.backgroundColor = 'red';
}
});
},
},
};
</script>
Student.vue
<template>
<div>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</div>
</template>
<script>
export default {};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)