7x5 精读Vue官方文档 - 特殊的 attribute

精读 Vue 官方文档系列 🎉

一些特殊的 Attribute，它们的行为看上去很类似于指令。

ref

ref 被用来给元素或子组件注册引用信息。引用信息将会附加在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素对象；如果用在子组件上，引用就指向组件实例：

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

当与 v-for 一同使用时，其值将是一个包含所有 DOM 或者组件实例的数组。

由于 ref 的引用依赖于组件的渲染结果，所以你不能同步的情况下在组件模板中对 $refs 做数据绑定，只能在一些异步并确保组件一定渲染完成，才可以读取 $refs 中的引用，进行相关操作。

is

用于动态组件的匹配，值可以是字符串形式的组件名称，也可以直接是一个组件对象（组件对象可以通过 props 的形式从父组件中传入，也可以是附加在自定义选项上，然后模板中使用 $options 进行引用）。

import Comp from './Comp.vue';
export default {
    name:'Hello',
    comp:Comp,
    template:'<component :is="$options.comp"></component>'
}

如果是完整版本的 Vue（纯 JavaScript 驱动的方式）则只能是一个字符串值。

<table>
    <tr :is="trComp"></tr>
</table>