vue 函数式组件如何获取dom？

Question

这是函数式组件：

<template functional>
    <div>
        这是函数式组件
    </footer>
</template>

<script>
    export default {}
</script>

我要怎么样获取这个组件的dom？我需要把这个dom挂载到el-scrollbar里面，但是render出来的vnode的elm和componentInstance都是undefined，小白求解

Answer 1

函数式组件不会实例化，自然是没有那些实例属性的。

<template functional>
    <div id='xxx'>
        这是函数式组件
    </footer>
</template>

<script>
    export default {}
</script>

//通过获取id就可以获取到DOM元素了

Answer 2

<template functional>
    <footer ref="footer">
        这是函数式组件
    </footer>
</template>

this.$refs.footer.$el

Answer 3

如果你希望操作DOM，可能更适合用vue.extend来做，而不是写成一个组件。
你可以看看这个文章，vue.extend与vue.component区别

Answer 4

请问这个问题你解决了吗，我使用类式组件正常实现了功能，调用$mount后就生成了DOM节点，但是当我换成函数式组件后，如果不new，就会提示this._inti为undefined，如果new之后调用实例的$mount方法则会提示不能从undefined上读取_c属性。