首页 前端知识 vue3中标签的ref属性

vue3中标签的ref属性

2024-08-07 00:08:04 前端知识 前端哥 677 15 我要收藏

组合API-ref属性

vue2.x中,可以通过给元素添加ref='xxx'属性,然后在代码中通过this.$refs.xxx获取到对应的元素

然而在vue3中时没有$refs这个东西的,因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取。

目标:掌握使用ref属性绑定DOM或组件

获取DOM或者组件实例可以使用ref属性,写法和vue2.0需要区分开

  • 基于Vue2的方式操作ref-----数组场景
<ul>
  <li v-for="(item, index) in list" ref="fruits" :key="index">{
  
  { item }}</li>
  <!-- <my-com :key='index' v-for='index in 8' ref='info'></my-com> -->
</ul>
<button @click="handleClick">点击</button>
methods: {
  handleClick () {
    const fruits = this.$refs.fruits
    console.log(fruits[1].innerHTML)
  }
}
// 批量绑定同名的ref (主要就是v-for场景中使用 ref),此时通过[this.$refs.名称]访问的值应该是一个数组,数组中包含每一个DOM元素
// ref绑定组件的用法与之类似

总结:

  1. Vue2中可以通过ref直接操作单个DOM和组件 this.$refs.info.innerHTML
  2. Vue2中可以批量通过ref操作DOM和组件 this.$refs.fruit[0].innerHTML
  • ref操作单个DOM元素----Vue3的规则
<template>
  <div>
    <div>ref操作DOM和组件</div>
    <hr>
    <!-- 3、模板中绑定上述返回的数据 -->
    <div ref='info'>hello</div>
    <!-- <my-com ref='info'>hello</my-com> -->
    <ul>
      <li ref='fruit' v-for='item in fruits' :key='item.id'>{
  
  {item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
name: 'App',
setup () {
// this. r e f s . i n f o . i n n e r H T M L / / t h i s . refs.info.innerHTML // this. refs.info.innerHTML//this.refs.fruit 的值应该是一个数组,数组中放的DOM元素
// this.$refs.fruit[0].innerHTML —> apple
// -----------------------------------------
// Vue3中通过ref操作DOM
// 1、定义一个响应式变量
const info = ref(null)

const fruits &#61; ref([{
  id: 1,
  name: &#39;apple&#39;
}, {
  id: 2,
  name: &#39;orange&#39;
}])

const handleClick &#61; () &#61;&gt; {
  // 4、此时可以通过info变量操作DOM
  console.log(info.value.innerHTML)
}

// 2、把变量返回给模板使用
return { fruits, info, handleClick }

}
}
</script>

<style lang="less">
</style>

总结:操作单个DOM或者组件的流程

  1. 定义一个响应式变量
  2. 把变量返回给模板使用
  3. 模板中绑定上述返回的数据
  4. 可以通过info变量操作DOM或者组件实例
  • 获取v-for遍历的DOM或者组件
<template>
  <div>
    <div>ref操作DOM和组件</div>
    <hr>
    <!-- 3、模板中绑定上述返回的数据 -->
    <div ref='info'>hello</div>
    <!-- <my-com ref='info'>hello</my-com> -->
    <ul>
      <li :ref='setFruits' v-for='item in fruits' :key='item.id'>{{item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>

<script>
import { ref } from ‘vue’

export default {
name: ‘App’,
setup () {
// this. r e f s . i n f o . i n n e r H T M L < / s p a n > < s p a n c l a s s = " t o k e n c o m m e n t " > / / t h i s . refs.info.innerHTML</span> <span class="token comment">// this. refs.info.innerHTML</span><spanclass="tokencomment">//this.refs.fruit 的值应该是一个数组,数组中放的DOM元素
// this.$refs.fruit[0].innerHTML —> apple
// -----------------------------------------
// Vue3中通过ref操作DOM
// 1、定义一个响应式变量
const info = ref(null)

<span class="token keyword">const</span> fruits <span class="token operator">&#61;</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span>
  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;apple&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;orange&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;pineapple&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token comment">// 定义操作DOM的函数</span>
<span class="token keyword">const</span> arr <span class="token operator">&#61;</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> <span class="token function-variable function">setFruits</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
  <span class="token comment">// 参数el表示单个DOM元素</span>
  arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">&#61;</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&#61;&gt;</span> <span class="token punctuation">{<!-- --></span>
  <span class="token comment">// 4、此时可以通过info变量操作DOM</span>
  <span class="token comment">// console.log(info.value.innerHTML)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 2、把变量返回给模板使用</span>
<span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span> fruits<span class="token punctuation">,</span> info<span class="token punctuation">,</span> handleClick<span class="token punctuation">,</span> setFruits <span class="token punctuation">}</span>

}
}
</script>

<style lang=“less”>
</style>

总结:ref批量操作元素的流程

  1. 定义一个函数
  2. 把该函数绑定到ref上(必须动态绑定
  3. 在函数中可以通过参数得到单个元素,这个元素一般可以放到数组中
  4. 通过上述数组即可操作批量的元素
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14969.html
标签
评论
发布的文章

前端-axios应用在html文件

2024-08-15 23:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!