在 Vue 中如何使用 JSX，就这么简单！
教程
https://bbs.huaweicloud.com/blogs/303705?utm_source=51cto&utm_medium=bbs-ex&utm_campaign=other&utm_content=content
用类似template语法书写jsx的插件
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
Vue里你需要知道的 scopedSlots ——jsx中使用vue作用域插槽
https://blog.csdn.net/weixin_43844696/article/details/107639061
Vue 项目中 JSX 语法如何使用 scopedSlots
https://blog.csdn.net/qq_36437172/article/details/114914763
在 render 函数中，Vue 实例属性：$attrs、$props、$listeners 和 $scopedSlots的使用
https://blog.csdn.net/qq_36437172/article/details/109640675
Vue插槽用法，在JSX中的用法_zh阿飞的博客-CSDN博客_jsx 插槽
https://blog.csdn.net/z1832729975/article/details/123429178
VUE中插槽slot用法 及其使用场景_xifanxiaochaorou的博客-CSDN博客_vue作用域插槽使用场景
https://blog.csdn.net/xifanxiaochaorou/article/details/123554221
jsx的render函数
// 在vue中写jsx需要render函数,这个函数的第一个参数常被命名为createElement的function参数
render: function (createElement, context) {
return createElement('h1', this.blogTitle)
}
//createElement(1.根据html元素名或者组件名生成标签,2.增加标签的dom属性或传入参数,3.若干子内容、标签 )
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签名、组件选项对象，或者
// resolve 了上述任何一种的一个 async 函数。必填项。
'div',
// {Object}
// 一个与模板中 attribute 对应的数据对象。可选。
{
// (详情见下一节)
},
// {String | Array}
// 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
// 也可以使用字符串来生成“文本虚拟节点”。可选。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
createElement(
"div",
{
class: "bigBox",
style: {
border: "1px solid red"
}
},
[
createElement("span",
{
domProps: {
innerText: 'innerBox!'
},
style: {
border: "5px solid green"
}
})
]
)
// 等价于
<div class="bigBox" style="border: 1px solid red;">
<span style="border: 5px solid green;">
innerBox!
</span>
</div>
jsx使用插槽
// 父组件
<template>
<div id="app">
<HelloWorld :msg = 'msg' @update:msg= 'change'>
<template v-slot:yymmzz>
写入helloWorld插槽
</template>
</HelloWorld>
</div>
</template>
// 子组件
console.log(this.$slots, '插槽')
console.log(this.$scopedSlots, '作用域插槽')
// $slots插槽有名字就".名字"获取，上面案例是yymmzz，没名字就通过.default获取
// $scopedSlots获取以后加()当函数运行，返回值和上面一样
但如果是作用域插槽，只能通过$scopedSlots获取
jsx使用作用域插槽
//子组件
<template>
<div>
<slot :zxc=obj>
<!-- 插槽里填写给父元素的数据 -->
</slot>
</div>
</template>
data() {
return {
def: '默认插槽',
page: 'page插槽'
}
}
// 父组件
// 用babel插件写的jsx
const content5 =
<page
scopedSlots = {
{
default: (scoped) => {
return (<span>'默认插槽+'{scoped.default}</span>)
},
page: (scoped) => {
return (<span>'具名插槽+'{scoped.page}</span>)
}
}
}
>
</page>
// createElement 写的jsx
const content6 = createElement(page, {
scopedSlots: {
default: (scoped) => {
return (<div>默认插槽+{scoped.default}</div>)
},
page: (scoped) => {
return createElement(
'div',
[
`具名插槽+${scoped.page}`
]
)
}
}
})
函数式组件使用场景
解释:函数式组件就是函数是组件 函数式组件与普通组件的区别 1.函数式组件需要在声明组件是指定 functional 2.不需要实例化，所以没有this,this通过render函数的第二个参数来代替 3.没有生命周期钩子函数，不能使用计算属性，watch 4.不能通过$emit 对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件 5.因为函数式组件是没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement 6.函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop,而普通组件所有未声明的属性都 解析到$attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止) 优点 1.由于函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件 2.函数式组件结构比较简单，代码结构更清晰 业务场景 比如一些详情页面，列表界面等，它们有一个共同的特点是只需要将外部传入的数据进行展现，不需要有内部状态，不需要在生命周期钩子函数里面做处理，这时候你就可以考虑使用函数式组件。vue 函数组件的应用及场景 - longpanda_怪怪哉 - 博客园
https://www.cnblogs.com/web-zqk/p/13235189.html
