Vue中ref的绑定与获取(静态、动态)

ref用在v-for内部时通过this.$refs.name获得的为一个数组，可知ref不同于id唯一标识，可以对同类型的dom采用相同的命名，通过vfor的下标获得具体指向的dom元素对不同的dom设置了有规律的ref,如ref='area1',ref='area2'，可以通过ES6中的模板字符串``获取，字符串中的变量采用${}

shangfengxia

11029人浏览 · 2022-04-14 20:37:23

shangfengxia · 2022-04-14 20:37:23 发布

1、静态绑定与获取

例：通过ref='demo1'设置dom的ref值，通过this.$refs.demo1或者this.$refs['demo1']获取到该dom元素

<div ref="demo1">demo1</div>

<script>
export default {
  name: 'demo',
  components: {},
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    console.log(this.$refs.demo1)
  },

  methods: {}
}
</script>

页面控制台输出如下：

2、静态绑定与动态获取（模板字符串）

例：对不同的dom设置了有规律的ref,如ref='area1',ref='area2'，可以通过ES6中的模板字符串``获取，字符串中的变量采用${}


 <div ref="area1" style="background-color: red"></div>
 <div ref="area2" style="background-color: yellow"></div>
 <div ref="area3" style="background-color: blue"></div>

export default {
  name: 'demo',
  components: {},
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    for (let i = 0; 1 < 3; i++) {
      this.$refs[`area${i + 1}`].style.height = ((i + 1) * 100) + 'px';
    }
  },

  methods: {}
}

页面效果如下：

3、动态绑定与动态获取

对一组可复用的dom,可以通过v-for实现，并动态给ref赋值，dom的获取仍用模板字符串

<!-- :ref="'menuItem'+变量"-->
<div :ref="'menuItem'+index" class="menu_item" v-for="(item,index) in menuData" :key="item.id" @click="clickMenu(index)">
    <div class="menu_item_title">
        {{item.name}}
    </div>
</div>

export default {
  name: 'demo',
  components: {},
  data() {
    return {
      menuData: [
        {id: '0001', name: '菜单一'},
        {id: '0002', name: '菜单二'},
        {id: '0003', name: '菜单三'},
      ],
    }
  },

  watch: {},
  computed: {},
  created() {
  },
  mounted() {
    console.log(this.$refs);
  },

  methods: {
    clickMenu: function (index) {
      //this.$refs[`menuItem${index}`]是个数组
      console.log("点击了", this.$refs[`menuItem${index}`][0]);
    }
  }
}

页面效果如下：

由上图可知在v-for中动态定义的ref='menuItem0',ref='menuItem1'等均为数组，获取单个dom元素时需在后方跟上[0]才能获得。

4、ref在vfor中的使用

ref用在v-for内部时通过this.$refs.name获得的为一个数组，可知ref不同于id唯一标识，可以对同类型的dom采用相同的命名，通过vfor的下标获得具体指向的dom元素

<!-- ref='menuItem'-->
<div ref="menuItem" class="menu_item" v-for="(item,index) in menuData" :key="item.id"
     @click="clickMenu(index)">
  <div class="menu_item_title">
    {{ item.name }}
  </div>
</div>

export default {
  name: 'demo',
  components: {},
  data() {
    return {
      menuData: [
        {id: '0001', name: '菜单一'},
        {id: '0002', name: '菜单二'},
        {id: '0003', name: '菜单三'},
      ],
    }
  },

  watch: {},
  computed: {},
  created() {
  },
  mounted() {
    console.log(this.$refs);
  },

  methods: {
    clickMenu: function (index) {
      //this.$refs['menuItem'][0]、this.$refs['menuItem'][1]、this.$refs['menuItem'][2]分别对应页面三个dom
      console.log("点击了下标：" + index, this.$refs['menuItem'][index]);
    }
  }
}

页面效果如下