vue内用jsx的一些疑问

Question

最近再把vue项目用jsx重写一遍，遇到一些问题：

1. jsx如何像.vue文件那样样式独立，比如我写了个样式，import到jsx文件后发现别的组件也能用这里面的样式，如何写组件专用的样式，通过类名吗？
2. jsx内有没有template类不占节点的标签，因为写出组件最后包个div和span不确定
3. 有没有比较好的vscode的jsx插件，代码模板
4. 插槽和作用域插槽，看的有的蒙，template写法里面我倒是会，但是jsx看的有点糊涂
5. 有没有一些好的vue用jsx的文档，目前看ant-design-vue源码，但是源码这东西引东引西的有点乱，看着吃力

暂时想到就这些，求大家解答一下，多谢了

Answer 1

学会react就能无缝衔接vue的JSX了。插槽这些没有了，都是函数式编程，通过组件回调渲染完成的。一般vue还是不采用JSX

Answer 2

我来说一下关于 jsx 中样式混乱的问题

.vue 单文件组件形式可以给 scoped 属性来是的组件中的样式只在组件内生效；
而使用 jsx 绑定的样式是全局生效的，只能通过自己通过样式类名进行区分（不过也可以通过开启 css module 来解决）
关于样式作用域的问题，在 react 中是可以styled-component等库来实现

---

另外 vue 中 jsx 没有 react 中用着舒服，至少其 this 指向就比较混乱。总之，不建议在 vue 中使用 jsx，还是使用 template 简单明了。

Answer 3

1、用vue-cli为脚手架的话，可以通过CSS Modules来实现组件样式唯一性。
2、至于tempate模板里的一些插槽之类的用法可能要变通一下，借助vue-class-component和vue-property-decorator这两个拓展插件在vue中用tsx还是比较轻松的，最近我也在用tsx写vue，可以看一下我总结的一篇文章。还有多看一下官网的渲染函数 & JSX，同时可以看一下这两篇文章https://www.jianshu.com/p/d8ed3aa76e9b和https://www.jianshu.com/p/e01bfc582cf5。