简介

ref，是一个组件（可以是原生组件或自定义组件）暴露给它所在环境的一个引用，定义ref时会设置一个数值，这个数值就是该组件在该环境内被引用时的id。通过调用某个ref的数值，一个环境（例如：一个组件对象，或者一个Vue对象）就可以获取到在该环境内定义的某个组件对象，然后就可以操作该组件对象了（例如：调用该组件内的方法等）。---- 这个解释有点抽象，可以通过下面的代码举例辅助理解。
当ref和 v-for 同时使用在一个组件上时，则通过该 ref 获取到的将是一个由组件元素构成的数组（各种Element对象组成的数组），数组中的组件元素就是v-for循环的那些元素。

官方文档链接

中文：cn.vuejs.org/v2/guide/co…
英文：vuejs.org/v2/guide/co…

代码举例

官方文档举了一个 <base-input ref="usernameInput"></base-input> 和 <input ref="input"> 的例子，但是没有具体代码，也没有关于 ref和v-for一起使用的情况，只是一句简单介绍，也没有相关使用案例。这里我就将这些案例代码都贴出来。

我的代码命名风格是：

data：变量名都以d开头

method: 方法名都以m开头

computed: 计算属性名都以c开头

ref: 变量名都以ref开头

案例1：ref单独使用

代码注意事项：
<script src="这里设置vue2.js所在的路径"></script>的内容需要改为你的 vue2.js在你工程中的路径

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue2 ref demo</title>
  <script src="这里设置vue2.js所在的路径"></script>
</head>
<body>
  <div id="app1"></div>
  <script>
    let baseInput = {
      data: function () {
        return {
          dContent: '',
        };
      },
      methods: {
        mFocus(){
          this.$refs.refInput.focus();
        },
      },
      template:
        `
        <div>
          <div>
            请输入内容： <input ref="refInput" type="text" v-model="dContent"/>
          </div>
          <div>
            你输入的内容是： {{dContent}}
          </div>
        </div>
        `,
    };

    new Vue({
      el: '#app1',
      components: {
        'base-input': baseInput,
      },
      methods: {
        mSetBaseInputTakeFocus(){
          this.$refs.refUsernameInput.mFocus();
        }
      },
      template:
      `
        <div>
          <base-input ref="refUsernameInput"></base-input>
          <button @click="mSetBaseInputTakeFocus">让baseInput组件聚焦</button>
        </div>
      `,
    });
  </script>
</body>
</html>

代码运行效果
- 效果：如下图
- 效果说明：默认情况下，文本输入框是没有聚焦（即：获得焦点）的，当点击按钮后，就会触发该文本输入框聚焦。

案例2：ref和v-for同时使用在一个组件上

代码注意事项：
<script src="这里设置vue2.js所在的路径"></script>的内容需要改为你的 vue2.js在你工程中的路径

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue2 ref used with v-for demo</title>
  <script src="这里设置vue2.js所在的路径"></script>
</head>
  <body>
    <div id="app1"></div>
    <script>
      let baseList = {
        data: function () {
          return {
            dContents: [
              {value: '1'},
              {value: '2'},
              {value: '3'},
              {value: '4'},
            ],
          };
        },
        methods: {
          mGetLiArrRef() {
            return this.$refs.refLi;
          },
        },
        template:
          `
          <ul>
            <li ref="refLi" v-for="(content,index) in dContents" >
              这是第{{index}}个li
            </li>
          </ul>
          `,
      };

      new Vue({
        el: '#app1',
        components: {
          'base-list': baseList,
        },
        data: {
          dColor: ['red', 'green'],
        },
        methods: {
          mChangeColors() {
            let vm = this;
            vm.$refs.refList.mGetLiArrRef().forEach((liElem, index) => {
              liElem.style.setProperty('color', getColor(index));
            });

            function getColor(index) {
              return (index <= vm.dColor.length - 1) ? vm.dColor[index] : 'blue';
            }
          }
        },
        template:
          `
            <div>
              <base-list ref="refList"></base-list>
              <button @click="mChangeColors">change colors of each li</button>
            </div>
          `,
      });
    </script>
  </body>
</html>

代码运行效果
- 效果：如下图
- 效果说明：点击按钮后，会修改每一个列表项的文字颜色，颜色先按照 dColor 数组中定义的数值依次使用，对于列表项数组下标超出 dColor数组下标的那些项，使用默认颜色 'blue'。所以点击按钮后，前两行文字颜色将分别变为红色和绿色，后面行的文字颜色将变为蓝色。

【Vue2基础】ref的用法

简介

官方文档链接

代码举例

案例1：ref单独使用

案例2：ref和v-for同时使用在一个组件上