该怎样理解vue中v-ref 和slot

Question

最近在看vuejs中文文档，无法理解那个v-ref和slot ，文档上的说明和实例好少，无法理解怎么使用他们？

Answer 1

v-ref

v-ref一般而言，用于组件引用，比如

<el-input v-ref="myinput"></el-input>

这样，你可以在JS里使用this.$refs.myinput直接指向这个组件实例，并且，这个值直接指向的是组件本身的this。比如，这个组件有一个方法aaa()，你就可以用this.$refs.myinput.aaa()直接调用组件内部的aaa()方法。

slot

Slot是用于组件中的占位符，组件标签是成对存在的，被组件的标签包裹的，会被填入到slot的位置，替代slot。也就是说，slot是为了让组件里的内容可变做出的一个手段。

主要有以下几种slot用法：
方法1：单slot区

// 组件A
<template>
    <div>
        <h2>A</h2>
        <slot></slot>
    </div>
</template>

// 调用组件A的部分
<A>
    <span>这是slot的部分</span>
</A>

这个最后会被解析成：

<div>
    <h2>A</h2>
    <span>这是slot的部分</span>
</div>

注意，此处组件里的<slot></slot>部分，被替换成了组件调用时，写在<A></A>标签里的部分。

当然，还有另外一个用法：具名slot，主要是针对有多个区域需要填入不同的内容，为了内容错位，给不同的slot加上名字，在组件调用时，填入slot的时候也写上对应的名字，这样，对应的填充块就被写到组件中相同名字的slot处。

// 组件A
<template>
    <div>
        <h1>这是标题</h1>
        <slot name="img"></slot>
        <slot name="para"></slot>
    </div>
</template>

// 调用组件A的地方
<A>
    <p slot="para">这是段落</p>
    <img slot="img" />
</A>

最后会被编译成HTML代码：

<div>
    <h1>这是标题</h1>
    <img slot="img" />
    <p slot="para">这是段落</p>
</div>

其中，A调用时候，里面的p由于slot值为para，所以会替换掉A组件里，name值为para的slot。
同理img由于slot值为img，所以会替换掉A组件里name为img的slot。

另外注意，替换的位置只根据slot名字在组件中原来的位置而定，比如上面A调用时候先写的p再写的img，但是由于组件中name=img的slot区域在name=para的slot区域之前，所以图片替换的位置在p标签替换位置之前。

Answer 2

html：

<h4 ref="payType">ref</h4>

js：

console.log(this.$refs.payType)