Vue 的渲染函数 让您可以使用 JSX (React 的 JavaScript 超集)构建组件。Vue 如此引人注目的原因之一是您可以使用原生 JavaScript 构建 Vue 应用程序——您不一定需要 JSX。 但是如果你是从 React 升级到 Vue,使用 Vue 的渲染函数可以让切换更加舒适。

Hello, Render!

您可以创建一个具有 render 功能。 当需要渲染组件时,Vue 调用 render() 具有单个参数的函数: createElement() 功能。

const app = new Vue({
  data: () => ({ user: World }),
  render: function(createElement) {
    // `this` refers to the Vue instance, so you can
    // edit data.
    return createElement(h1, Hello,  + this.user);
  }
});

使用 JSX

createElement() 功能类似于 React 的顶层 createElement() 功能 。 这意味着像 Babel https://babeljs.io/docs/en/babel-plugin-transform-react-jsx 器可以将下面的 JSX Vue 实例转换为前面的示例。

/** @jsx createElement */

const app = new Vue({
  data: () => ({ user: World }),
  render: function(createElement) {
    return (<h1>{this.user}</h1>);
  }
});

请注意 @jsx pragma 注释 上面 必须 createElement() 函数名。 该注释告诉编译器在将 JSX 转换为时使用什么函数 createElement() 来电。

数据输入

你不能使用内置的 Vue 指令,比如 v-forv-model 带有渲染功能 。 你可以做的是使用第二个参数 createElement()_ 定义 on 处理程序

const app = new Vue({
  data: () => ({ count: 0 }),
  render: function(createElement) {
    return createElement(div, null, [
      createElement(h1, Count:  + this.count),
      // Note that the **2nd** parameter is the `data` object. Otherwise,
      // `on` wont work.
      createElement(button, {
        domProps: {
          innerHTML: Increment
        },
        on: { click: () => ++this.count }
      })
    ]);
  }
});

通过上面的例子,你可以点击 增量 按钮来增加 count 的值。

© 版权声明
评论 抢沙发

请登录后发表评论