标签：vue return default HelloWorld 12 Vue3 null jsx

h函数

Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM）

h() 函数是一个用于创建 vnode 的一个函数。createVNode() 简化为 h() 函数

接受三个参数：

　　1、{String | Object | Function} ：一个Html标签名，一个组件，一个异步组件，一个函数式组件【必需】

　　2、{Object} Props：与attribute、prop和事件相关的对象【可选填】

　　3、{String | Object | Array} children：子VNodes，使用h()创建或者使用字符串获取“文本VNode”、或有插槽的对象【可选填】

#App.vue
<script>
import { h } from "vue";
import HelloWorld from "./HelloWorld.vue";

export default {
  //setup 方式
  // setup() {
  //   return () => {
  //     ......
  //   };
  // },
  //render方式
  render() {
    return h("div", null, [
      h(HelloWorld, null, {
        default: (props) =>
          h("span", null, `app传入到HelloWorld中的内容: ${props.name}`)
      })
    ]);
  },
};
</script>

#HelloWorld.vue
<script>
  import { h } from "vue";

  export default {
    render() {
      return h("div", null, [
        h("h2", null, "Hello World"),
        this.$slots.default ? this.$slots.default({name: "coderwhy"}): h("span", null, "我是HelloWorld的插槽默认值")
      ])
    }
  }
</script>

jsx

jsx通常会通过Babel来进行转换（React编写的jsx就是通过babel转换的）；

#安装
npm install @vue/babel-plugin-jsx -D
#babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:[
    '@vue/babel-plugin-jsx'
  ]
}

jsx组件使用

#App.vue
<script>
  import HelloWorld from './HelloWorld.vue';

  export default {
    data() {
      return {
        counter: 0
      }
    },

    render() {
      const increment = () => this.counter++;
      const decrement = () => this.counter--;

      return (
        <div>
          <h2>当前计数: {this.counter}</h2>
          <button onClick={increment}>+1</button>
          <button onClick={decrement}>-1</button>
          <HelloWorld>
          </HelloWorld>
        </div>
      )
    }
  }
</script>

#HelloWorld.vue
<script>
  export default {
    render() {
      return (
        <div>
          <h2>HelloWorld</h2>
          {this.$slots.default ? this.$slots.default(): <span>哈哈哈</span>}
        </div>
      )
    }
  }
</script>

标签：vue,return,default,HelloWorld,12,Vue3,null,jsx
来源： https://www.cnblogs.com/hexrui/p/15737083.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。