在 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函数

?

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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

// 在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", <br>　　　　　　　　　　　　　　 {                             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使用插槽

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// 父组件 <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使用作用域插槽

?

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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

//子组件 <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