VUE学习-渲染函数

渲染函数

x-template

• 引入外面组件文件写法

  <template>
      <h1 v-if="level === 1">
          <slot></slot>
      </h1>
      <h2 v-else-if="level === 2">
          <slot></slot>
      </h2>
      <h3 v-else-if="level === 3">
          <slot></slot>
      </h3>
      <h4 v-else>
          <slot></slot>
      </h4>
  </template>
  <script>
      exports default{
          props: {
              level: {type: Number}
          }
      }
  </script>
  

  <anchored-heading :level="2">自定义标题</anchored-heading>
  
  <script>
      import anchoredHeading from '@/components/anchoredHeading'
      components: { anchoredHeading },
  </script>
  

• html 页面内组件写法, 属性 id 方便取到组件内容

  <script type="text/x-template" id="anchored-heading-template">
      <h1 v-if="level === 1">
          <slot></slot>
      </h1>
      <h2 v-else-if="level === 2">
          <slot></slot>
      </h2>
      <h3 v-else-if="level === 3">
          <slot></slot>
      </h3>
      <h4 v-else>
          <slot></slot>
      </h4>
  </script>
  

  <anchored-heading :level="2">自定义标题</anchored-heading>
  
  <script>
      components: {
          'anchoredHeading': {
              template: '#anchored-heading-template',
              props: {
                  level: {
                      type: Number,
                      required: true
                  }
              }
          },
      },
  </script>
  

• 渲染函数渲染类似组件

  <anchored-heading :level="2">自定义标题</anchored-heading>
  
  <script>
      components: {
          'anchoredHeading': {
              render: function (createElement) {
                  return createElement(
                      'h' + this.level,   // 标签名称
                      this.$slots.default // 子节点数组
                  )
              },
              props: {
                  level: {
                      type: Number,
                      required: true
                  }
              }
          },
      },
  </script>
  

createElement()

createElement(
    // {String | Object | Function}
    // 一个 HTML 标签名、组件选项对象，或者 resolve 了上述任何一种的一个 async 函数。必填项。
    'div', 
    // {Object}
    // 一个与模板中 attribute 对应的数据对象。可选。
    {
        // 与 `v-bind:class` 的 API 相同，
        // 接受一个字符串、对象或字符串和对象组成的数组
        class: {
            foo: true,
            bar: false
        },
        // 与 `v-bind:style` 的 API 相同，
        // 接受一个字符串、对象，或对象组成的数组
        style: {
            color: 'red',
            fontSize: '14px'
        },
        // 普通的 HTML attribute
        attrs: { id: 'foo' },
        // 组件 prop
        props: { myProp: 'bar' },
        // DOM property
        domProps: { innerHTML: 'baz' },
        // 事件监听器在 `on` 内，
        // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
        // 需要在处理函数中手动检查 keyCode。
        on: { click: this.clickHandler },
        // 仅用于组件，用于监听原生事件，而不是组件内部使用
        // `vm.$emit` 触发的事件。
        nativeOn: { click: this.nativeClickHandler },
        // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
        // 赋值，因为 Vue 已经自动为你进行了同步。
        directives: [{
            name: 'my-custom-directive',
            value: '2',
            expression: '1 + 1',
            arg: 'foo',
            modifiers: { bar: true }
        }],
        // 作用域插槽的格式为
        // { name: props => VNode | Array<VNode> }
        scopedSlots: {
            default: props => createElement('span', props.text)
        },
        // 如果组件是其它组件的子组件，需为插槽指定名称
        slot: 'name-of-slot',
        // 其它特殊顶层 property
        key: 'myKey',
        ref: 'myRef',
        // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
        // 那么 `$refs.myRef` 会变成一个数组。
        refInFor: true
    },
    // {String | Array}
    // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成， 也可以使用字符串来生成“文本虚拟节点”。可选。
    // this.$slots.default 可以直接加入使用组件时插入插槽的组件
    [
        '先写一些文字',
        createElement('h1', '一则头条'),
        createElement(MyComponent, {
            props: { someProp: 'foobar' }
        })
    ]
)