vue2 css module 和 ref

发表于 更新于 分类于 ， 阅读次数： Changyan： 本文字数： 845 阅读时长 ≈ 1 分钟
vue2中使用css module和ref操作dom元素

使用 css module

需要将样式文件命名为xxx.module.ooo

xxx为文件名

ooo为样式文件后缀名，可以是css、less

得到组件渲染的 Dom

1
2
3
4
5
6
7
8
9
10
/**
    获取某个组件渲染的Dom根元素
  */
function getComponentRootDom(comp, props) {
	const vm = new Vue({
		render: (h) => h(comp, { props }),
	});
	vm.$mount();
	return vm.$el;
}

扩展 vue 实例

弹出消息

ref

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
	<div>
		<p ref="para">some paragraph</p>
		<ChildComp ref="comp" />
		<button @click="handleClick">查看所有引用</button>
	</div>
</template>

<script>
	import ChildComp from "./ChildComp";
	export default {
		components: {
			ChildComp,
		},
		methods: {
			handleClick() {
				// 获取持有的所有引用
				console.log(this.$refs);
				/*
        {
        	para: p元素（原生DOM）,
        	comp: ChildComp的组件实例
        }
        */
			},
		},
	};
</script>

通过ref可以直接操作dom元素，甚至可能直接改动子组件，这些都不符合vue的设计理念。

除非迫不得已，否则不要使用ref