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' }

        })

    ]

)

巴特西

VUE学习-渲染函数

渲染函数

x-template

createElement()

最新文章

热门文章