注意：
因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 – 它们还不存在
$refs不是响应式的，因此你不应该试图用它在模板中做数据绑定。
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
假如在jsx中想要引用遍历元素或组件的时候，例如：
const LiArray = () => this.options.map(option => (
<li ref="li" key={option}>{option}</li>
))
会发现从this.$refs.li中获取的并不是期望的数组值，这个时候就需要使用refInFor属性，并置为true来达到在模板中v-for中使用ref的效果：
const LiArray = () => this.options.map(option => (
<li ref="li" refInFor={true} key={option}>{option}</li>
))
插槽（v-slot)
在jsx中可以使用this.$slots来访问静态插槽的内容。
注意：在Vue 2.6.x版本后废弃了slot和slot-scope，在模板中统一使用新的统一语法v-slot指令。v-slot只能用于Vue组件和template标签。
<div class="page-header__title">
{this.$slots.title ? this.$slots.title : this.title}
</div>
等价于模板的
<div class="page-header__title">
<slot name="title">{{ title }}</slot>
</div>
在Vue官方文档中提到：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。因此像下面的示例是无法正常工作的
<current-user>
{{ user.firstName }}
</current-user>
在<current-user>组件中可以访问到user属性，但是提供的内容却是在父组件渲染的。如果想要达到期望的效果，这个时候就需要使用作用域插槽了。下面是改写后的代码，更多知识点可以直接查看官方文档的作用域插槽。
<!-- current-user组件定义部分 -->
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span><!-- current-user 使用 -->
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
上面的示例其实就是官方的示例，这里需要说明的是，其实在Vue中所谓的作用域插槽功能类似于React中的Render Props的概念，只不过在React中我们更多时候不仅提供了属性，还提供了操作方法。但是在Vue中更多的是提供数据供父作用域渲染展示，当然我们也可以把方法提供出去，例如：
