【Vue2基础】ref的用法

·  阅读 3660

简介

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

官方文档链接

代码举例

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

我的代码命名风格是:

  • data: 变量名都以d开头
  • method: 方法名都以m开头
  • computed: 计算属性名都以c开头
  • ref: 变量名都以ref开头

案例1:ref单独使用

  1. 代码注意事项:
    <script src="这里设置vue2.js所在的路径"></script>的内容需要改为你的 vue2.js在你工程中的路径
  2. 代码如下:
    <!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>
    复制代码
  3. 代码运行效果
    • 效果:如下图
    • 效果说明:默认情况下,文本输入框是没有聚焦(即:获得焦点)的,当点击按钮后,就会触发该文本输入框聚焦。
    vue-ref.gif

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

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

  2. 代码如下:

    <!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>
    复制代码
  3. 代码运行效果

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

    vue-ref-v-for.gif

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改