在 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