JSX

Posted 2021-02-04 噬蛇之牙

• 有一个 Babel 插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。JSX语法返回一个vnode对象

import AnchoredHeading from ‘./AnchoredHeading.vue‘

new Vue({
  el: ‘#demo‘,
  render: function (h) { // 将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的，如果在作用域中 h 失去作用，在应用中会触发报错。
    let slots = this.$slots.default[0] // 返回vnode
    return (
      <AnchoredHeading level={1}> // 绑定数字
        <div id="foo">{this.text}</div> // 绑定变量
        <span>Hello</span> world!
        {slots}
      </AnchoredHeading>
    )
  }
})
// 省略写法，不需要括号
return <div id="foo">bar</div>

// ｛｝绑定vnode，需要绑定js代码
return <div>
    ｛[
        <div>1</div>,
        <div>2</div>,
        <div>3</div>
    ]｝
</div>