Vue 中 createElement 使用实例详解

下面我给出“Vue 中createElement 使用实例详解”的完整攻略，包括基本语法和两条示例说明。

What is createElement?

createElement 是 Vue 的一个渲染函数，它通过 JavaScript 代码的方式生成虚拟 DOM。通过 createElement 我们能够在 JS 代码中定义 Vue 的组件，从而实现动态渲染。

Syntax

createElement 实际上只有一个参数，就是一个对象，通过这个对象可以定义组件、事件和样式等。你可以通过 createElement 参数中的 tag 参数来定义组件或者 HTML 标签，然后把事件和样式等放在 createElement 参数的第三个参数中。具体的语句如下：

createElement(tag, data, children)

• tag：可以是一个字符串，也可以是一个函数
• data：是一个对象，可以定义事件、样式等
• children：是一个数组，包含更多的 createElement 函数，用于递归处理子节点的 createElement 函数。

示例一：使用 createElement 渲染一个按钮组件

下面的例子中我们使用 createElement 渲染出一个简单的按钮组件：

Vue.extend({
  render: function (createElement) {
    return createElement('button', {
      class: 'btn btn-primary',
      on: {
        click: this.handleClick
      }
    }, this.$slots.default)
  },
  methods: {
    handleClick: function () {
      alert('Hello World!');
    }
  }
});

这个例子中，我们使用 createElement 方法来渲染一个按钮，参数说明如下：

• 'button'：是渲染后生成的标签名
• { class: 'btn btn-primary', on: { click: this.handleClick } }：是 Vue 组件的属性，包含 class 和 click 事件
• this.$slots.default：是 Vue 组件的子组件属性，表示在这个组件中嵌套的子组件。

示例二：使用createElement 渲染一个有嵌套子元素的组件

下面的例子中我们使用 createElement 渲染出一个包含嵌套子元素的组件：

Vue.extend({
  render: function (createElement) {
    return createElement('div', {
      class: 'wrapper'
    }, [
      createElement('h1', 'Welcome to Vue.js'),
      createElement('p', 'Vue.js is a javascript framework that simplifies web development')
    ])
  }
});

这个例子中，我们使用 createElement 方法来渲染一个包含有嵌套子元素的组件，参数说明如下：

• 'div'：是渲染后生成的标签名
• { class: 'wrapper' }：是 Vue 组件的属性，包含 class
• [ createElement('h1', 'Welcome to Vue.js'), createElement('p', 'Vue.js is a javascript framework that simplifies web development') ]：是 Vue 组件的子组件属性，表示在这个组件中嵌套的子组件，这个例子中包含两个子组件。