render函数和ref属性

render函数

关于不同版本的vue

一.vue.js与vue.runtime.xxx.js的区别
1.vue.js是完整版本的vue，包含：核心功能+模板解析器。
2.vue.runtime.xxx.js是运行版本的vue。只包括核心功能：没有模板解析器。

二.因为vue.runtime.xxx.js没有模板解析器.所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

单文件

<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-if="level === 4">
        <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
        <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
        <slot></slot>
    </h6>
</template>
<script>
export default {
  name: 'anchored-heading',
  props: {
        level: {
            type: Number,
            required: true
        }
    }
}
</script>

render函数的实现

Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement(
            'h' + this.level,   // tag name 标签名称
            this.$slots.default // 子组件中的阵列
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})

ref属性

1.被用于给元素和子组件注册引用信息（id的替代品）
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3.使用方式：

标识：<h1 ref=”xxx“>......</h1>或者,<message ref="xxx"></message>

获取：this.$refs.xxx