使用css module

需要将文件名命名为 xxx.module.ooo
xxx为文件名
ooo为css或者less

得到组件渲染的DOM

/**获取某个组件渲染的根元素*/
function getComponentDom(comp, props){//传入组件对象 组件的属性 返回组件的根dom元素
   const vm = new Vue({
     render:h=>h(comp,{props})
   })
   vm.$mount()
   return vm.$el;
}
//如何使用
import Icom from "./components/Icon"//导入一个模块
getComponentDom(Icon,type:"home")

扩展vue实例

ref

<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