Vue 中的 `JSX`

一、JSX

JSX同样写在Render函数中，但是相比于Render函数更加易于理解。

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

这就是为什么会有一个 Babel 插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。

1.1 Attributes

render () {
  <input name="id" />
}

1.2 Props

export default {
  name: 'Test',
  components: {
    MyComponent
  },
  data () {
    return {
      name: 'Jesse'
    }
  },
  render () {

    const text = 'JSX'
    const props = {
      attrs: {
        name: 'Jesse',
        age: 1,
        sex: 'man'
      }
    }

    return (
      <div>
        <h3>Hello World</h3>
        {/* 你好 */}
        <p>Wellcome to {text}</p>
        <my-component {...props} alias={this.name}></my-component>
      </div>
    )
  }
}

使用{}传递动态值，{...props}可以展开传递，同v-bind

接收

const MyComponent = {
  name: 'MyComponent',
  functional: true,
  render (h, ctx) {
    console.log(ctx.props)
    return (
      <div>
        Hi~ {ctx.props.name}
        <p>Alias: {ctx.props.alias}</p>
      </div>
    )
  }
}

这里我们采用函数式组件的方式接收，请看函数式组件

1.3 Methods

const onClick = () => {
  console.log(111111)
}

const listeners = {
  on: {
    go () {
      console.log('go')
    },
    to () {
      console.log('to')
    }
  }
}

return (
  <div>
    <h3 onClick={onClick} {...listeners}>Hello World</h3>
  </div>
)

事件传递与Props传递类似，区别在于前面要加个on的前缀，同样可以展开绑定，类似于v-on

为了以是区分，Vue对JSX做了一系列的便捷操作

v-on------> vOn
v-model------>vModel
v-on:click.stop.prevent------>vOn:click_stop_prevent
v-html------>domPropsInnerHTML

1.4 父子组件交互

const MyComponent = {
  name: 'MyComponent',
  functional: true,
  render (h, ctx) {
    ctx.listeners.back()
    ctx.listeners.go()
    return (
      <div></div>
    )
  }
}

export default {
  name: 'Test',
  components: {
    MyComponent
  },
  render () {

    const onClick = () => {
      console.log(111111)
    }
    
    const listeners = {
      on: {
        go () {
          console.log('go')
        },
        to () {
          console.log('to')
        }
      }
    }


    return (
      <div>
        <h3 onClick={onClick}>Hello World</h3>
        <my-component onBack={onClick} {...listeners}></my-component>
      </div>
    )
  }
}

注：在函数式组件中，无法使用this.$emit触发，取而代之的是listeners属性中传递的事件

1.5 循环

{/* 类似于v-if */}
{this.withTitle && <Title />}

{/* 类似于v-if 加 v-else */}
{this.isSubTitle ? <SubTitle /> : <Title />}

{/* 类似于v-for */}
{this.options.map(option => {
  <div>{option.title}</div>
})}

二、函数式组件

我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。一个函数式组件就像这样：

export default {
  functional: true,
  render: function (createElement, context) {
    // 完全透传任何 attribute、事件监听器、子节点等。
    return createElement("button", context.data, context.children);
  }
};

注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的 attribute 都会被自动隐式解析为 prop。

当使用函数式组件时，该引用将会是 HTMLElement，因为他们是无状态的也是无实例的。

在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：

<template functional>
</template>

组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：

props：提供所有 prop 的对象
children：VNode 子节点的数组
slots：一个函数，返回了包含所有插槽的对象
scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
parent：对父组件的引用
listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

在添加 functional: true 之后，需要更新我们的锚点标题组件的渲染函数，为其增加 context 参数，并将 this.$slots.default 更新为 context.children，然后将 this.level 更新为 context.props.level。

因为函数式组件只是函数，所以渲染开销也低很多。

在作为包装组件时它们也同样非常有用。比如，当你需要做这些时：

程序化地在多个组件中选择一个来代为渲染；
在将 children、props、data 传递给子组件之前操作它们。

2.1 向子元素或子组件传递 attribute 和事件

在普通组件中，没有被定义为 prop 的 attribute 会自动添加到组件的根元素上，将已有的同名 attribute 进行替换或与其进行智能合并。

然而函数式组件要求你显式定义该行为：

Vue.component('my-functional-button', {
  functional: true,
  render: function (createElement, context) {
    // 完全透传任何 attribute、事件监听器、子节点等。
    return createElement('button', context.data, context.children)
  }
})

通过向 createElement 传入 context.data 作为第二个参数，我们就把 my-functional-button 上面所有的 attribute 和事件监听器都传递下去了。事实上这是非常透明的，以至于那些事件甚至并不要求 .native 修饰符。

如果你使用基于模板的函数式组件，那么你还需要手动添加 attribute 和监听器。因为我们可以访问到其独立的上下文内容，所以我们可以使用 data.attrs 传递任何 HTML attribute，也可以使用 listeners (即 data.on 的别名) 传递任何事件监听器。

<template functional>
  <button
    class="btn btn-primary"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <slot/>
  </button>
</template>

2.2 `slots()` 和 `children` 对比

你可能想知道为什么同时需要 slots() 和 children。slots().default 不是和 children 类似的吗？在一些场景中，是这样——但如果是如下的带有子节点的函数式组件呢？

<my-functional-component>
  <p v-slot:foo>
    first
  </p>
  <p>second</p>
</my-functional-component>

对于这个组件，children 会给你两个段落标签，而 slots().default 只会传递第二个匿名段落标签，slots().foo 会传递第一个具名段落标签。同时拥有 children 和 slots()，因此你可以选择让组件感知某个插槽机制，还是简单地通过传递 children，移交给其它组件去处理。

Vue 中的 JSX