前置知识：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官网 |
