Vue Render函数

计算机软件开发 · 2024-9-28 10:40:16

前置知识：vm.$slots

范例：{ [name: string]: ?Array<VNode> }
只读
相应性：否
详细：
用来访问被插槽分发的内容。每个具名插槽有其相应的 property (比方：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default property 包括了全部没有被包罗在具名插槽中的节点，或 v-slot:default 的内容。
请注意插槽不是相应性的。如果你必要一个组件可以在被传入的数据发生厘革时重渲染，我们发起改变计谋，依赖诸如 props 或 data 等相应性实例选项。
注意：v-slot:foo 在 2.6 以上的版本才支持。对于之前的版本，你可以使用废弃了的语法。
在使用渲染函数誊写一个组件时，访问 vm.$slots 最有帮助。

<blog-post>  <template v-slot:header> <h1>About Me</h1>  </template>  <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>  <template v-slot:footer> <p>Copyright 2016 Evan You</p>  </template>  <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.</blog-post>Vue.component('blog-post', {  render: function (createElement) { var header = this.$slots.header var body = this.$slots.default var footer = this.$slots.footer return createElement('div', [    createElement('header', header),    createElement('main', body),    createElement('footer', footer) ])  }})节点、树以及假造 DOM

createElement 参数

// @returns {VNode}createElement(  // {String | Object | Function}  // 一个 HTML 标署名、组件选项对象，大概  // resolve 了上述任何一种的一个 async 函数。必填项。  'div',  // {Object}  // 一个与模板中 attribute 对应的数据对象。可选。  { // (详情见下一节)  },  // {String | Array}  // 子级假造节点 (VNodes)，由 `createElement()` 构建而成，  // 也可以使用字符串来天生“文本假造节点”。可选。  [ '先写一些笔墨', createElement('h1', '一则头条'), createElement(MyComponent, { // vnode数据对象的属性，props，data，methods等等，也可以是HTML attribute    props: {       someProp: 'foobar'    } })  ])有一点要注意：正如 v-bind:class 和 v-bind:style 在模板语法中会被特别对待一样，它们在 VNode 数据对象中也有对应的顶层字段。该对象也答应你绑定平凡的 HTML attribute，也答应绑定如 innerHTML 如许的 DOM property (这会覆盖 v-html 指令)。
{  // 与 `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}下面是使用render创建的组件示例：

var getChildrenTextContent = function (children) {  return children.map(function (node) { return node.children    ? getChildrenTextContent(node.children)    : node.text  }).join('')}Vue.component('anchored-heading', {  render: function (createElement) { // 创建 kebab-case 风格的 ID var headingId = getChildrenTextContent(this.$slots.default)    .toLowerCase()    .replace(/\W+/g, '-')    .replace(/(^-|-$)/g, '') return createElement(    'h' + this.level,    [       createElement('a', {       attrs: {          name: headingId,          href: '#' + headingId       }       }, this.$slots.default)    ] )  },  props: { level: {    type: Number,    required: true }  }})VNode 必须唯一

组件树中的全部 VNode 必须是唯一的。这意味着，下面的渲染函数是不合法的：
render: function (createElement) {  var myParagraphVNode = createElement('p', 'hi')  return createElement('div', [ // 错误 - 重复的 VNode myParagraphVNode, myParagraphVNode  ])}如果你真的必要重复很多次的元素/组件，你可以使用工厂函数来实现。比方，下面这渲染函数用完全合法的方式渲染了 20 个类似的段落：
render: function (createElement) {  return createElement('div', Array.apply(null, { length: 20 }).map(function () {    return createElement('p', 'hi') })  )}使用 JavaScript 取代模板功能

v-if 和 v-for

只要在原生的 JavaScript 中可以轻松完成的操纵，Vue 的渲染函数就不会提供专有的更换方法。比如，在模板中使用的 v-if 和 v-for：
<ul v-if="items.length">  <li v-for="item in items">{{ item.name }}</li></ul><p v-else>No items found.</p>这些都可以在渲染函数中用 JavaScript 的 if/else 和 map 来重写：
props: ['items'],render: function (createElement) {  if (this.items.length) { return createElement('ul', this.items.map(function (item) {    return createElement('li', item.name) }))  } else { return createElement('p', 'No items found.')  }}v-model

渲染函数中没有与 v-model 的直接对应——你必须自己实现相应的逻辑：
props: ['value'],render: function (createElement) {  var self = this  return createElement('input', { domProps: {    value: self.value }, on: {    input: function (event) {       self.$emit('input', event.target.value)    } }  })}事故 & 按键修饰符

对于 .passive、.capture 和 .once 这些事故修饰符，Vue 提供了相应的前缀可以用于 on：
on: {  '!click': this.doThisInCapturingMode,  '~keyup': this.doThisOnce,  '~!mouseover': this.doThisOnceInCapturingMode}对于有些修饰符，私有前缀都不是必须的，由于你可以在事故处置处罚函数中使用事故方法：
on: {  keyup: function (event) { // 如果触发事故的元素不是事故绑定的元素 // 则返回 if (event.target !== event.currentTarget) return // 如果按下去的不是 enter 键大概 // 没有同时按下 shift 键 // 则返回 if (!event.shiftKey || event.keyCode !== 13) return // 克制事故冒泡 event.stopPropagation() // 克制该元素默认的 keyup 事故 event.preventDefault() // ...  }}插槽

你可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组：
render: function (createElement) {  // `<div><slot></slot></div>`  return createElement('div', this.$slots.default)}也可以通过 this.$scopedSlots 访问作用域插槽，每个作用域插槽都是一个返回多少 VNode 的函数：
props: ['message'],render: function (createElement) {  // `<div><slot :text="message"></slot></div>`  return createElement('div', [ this.$scopedSlots.default({    text: this.message })  ])}如果要用渲染函数向子组件中通报作用域插槽，可以使用 VNode 数据对象中的 scopedSlots 字段：
render: function (createElement) {  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`  return createElement('div', [ createElement('child', {    // 在数据对象中通报 `scopedSlots`    // 格式为 { name: props => VNode | Array<VNode> }    scopedSlots: {       default: function (props) {       return createElement('span', props.text)       }    } })  ])}以上示例均来自vue2官网

Vue Render函数

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品