vue - ref

作者: 人话博客 | 来源:发表于2019-01-19 12:04 被阅读0次

vue - ref 说明

ref 是英文单词 reference,代表引用.

vue 中, ref 的使用分四种情况.

  1. ref 作用于普通的 HTML 元素.
  2. ref 作用于component
  3. v-for 配合 :ref 绑定表达式作用于普通的 HTML 元素.
  4. v-for 配合 :ref 绑定表达式作用于 component

1. ref 作用于普通的 HTML 元素.

ref 作用于普通的 HTML 元素是, this.$refs.ref 拿到的就是普通的 DOM 元素.

<!-- 作用于普通的html -->
    <input type="text" ref='input'><br>
    <button @click='handlerRefOnNormalHTML'>ref作用于普通的HTML</button><br>
handlerRefOnNormalHTML() {
        // 当 ref 总用于普通的HTML元素上时,拿到的就是普通的dom对象.
        this.$refs.input.value = '普通的HTML元素'
      }

结果:

ref-html

2. ref 作用于component

ref 作用于 component 的时候, this.$refs.ref 拿到的就是对应的 component 实例对象.

<div id='app'>
  <!-- 当ref作用于组件上时,ref拿到的就是组件 -->
    <helloworld ref='comHello'></helloworld><br>
    <button @click='handlerRefOnComponent'>ref作用于组件上</button><br>
  </div>

  <template id='helloworld'>
    <div>
      <h1 ref='hello'>{{msg}}</h1>
    </div>
  </template>
 Vue.component('helloworld', {
    template: '#helloworld',
    data() {
      return {
        // 组件内部的数据
        msg: '我是组件的msg'
      }
    },
    methods: {
        // 组件内部的方法
      changeBGColor() {
        this.$refs.hello.style.backgroundColor = 'red';
      }
    }
  })
  
  
  handlerRefOnComponent() {
        // 当ref作用于组件上时,ref拿到的就是组件
        // 修改组件实例的数据
        this.$refs.comHello.msg = '父组件把我的msg改改成这样了.'
        // 调用最佳实例的方法.
        this.$refs.comHello.changeBGColor()
      }
  

我们在 app.vuehandlerRefOnComponent 通过 this.$refs.comHello.
拿到当前组件的实例.
修改此组件身上的 data-msg属性.
以及调用此组件的 changeBGColor() 方法.

结果:

ref-component

3. v-for 配合 :ref 绑定表达式作用于普通的 HTML 元素.

当我们使用 v-for 遍历一些普通的 HTML 元素,并使用 :ref绑定表达式绑定这些元素时.
可以使用 this.$refs[bindValue][0] 来访问到在循环里绑定到的这些HTML元素.

 <h3>ref在for循环中,作用于普同的HTML元素,$refs[index][0] 拿到的就是普通的DOM元素</h3>
<ul>
      <!-- 当 ref 在循环中,绑定的是一个普通的HTML元素时 -->
      <li v-for="(item,index) of list" :key="index" :ref="index" @click="hanlderRefOnHTMLLoop(index)">
        {{item}}
      </li>
</ul>
 hanlderRefOnHTMLLoop(index) {
        // 当ref 作用在循环上时,通过熟悉绑定的ref dom 对象是被放在了一个数组当中了.
        this.$refs[index][0].style.backgroundColor = 'orange'
      }

结果:

v-for-:ref-html

4. v-for 配合 :ref 绑定表达式作用于 component

当我们使用 v-for 搭配 :refs 属性绑定表达式作用于 component 上.
我们可以使用 this.$refs[bindValue][0] 拿到对应的组件.

  <h3>ref在for循环中,作用于普同的HTML元素,$refs[index][1] 拿到的就是组件实例</h3>
    <ul>
      <li v-for="(item,index) in 5" :key="index" @click="hanlderRefOnComponentLoop(index)">
        <hello-world :ref='index'></hello-world>
      </li>
    </ul>
  </div>

  <template id='HelloWorld'>
    <div>
      <h1 ref='h1'>{{msg}}</h1>
    </div>
  </template>
 Vue.component('HelloWorld', {
    template: '#HelloWorld',
    data() {
      return {
        msg: 'Hello World 组件的 msg'
      }
    },
    methods: {
      changeBGColor() {
        this.$refs.h1.style.backgroundColor = 'orange'
      }
    }
  })
  
    hanlderRefOnComponentLoop(index) {
        // ref在for循环中,作用于普同的HTML元素,$refs[index][0] 拿到的就是组件实例
        this.$refs[index][0].msg = '修改了组件内部的值'
        this.$refs[index][0].changeBGColor()
      }

我们通过 this.$refs[index][0] 拿到对应的组件后.

接可以拿到当前组件的实例.

修改此组件身上的 data-msg属性.
以及调用此组件的 changeBGColor() 方法.

结果:

v-for-:ref-component

为什么在 v-for 里,那引用的HTML或者组件非要是 this.refs[bindValue][0] ?

为什么在 v-for & :ref 的时候,this.$refs[bindValue] 返回的是一个数组呢?

当我们在组件内部,同时有一个以上的这样的搭配时,就能说明问题了.

<div id='app'>
    <h3>ref在for循环中,作用于普同的HTML元素,$refs[index][0] 拿到的就是普通的DOM元素</h3>
    <ul>
      <!-- 当 ref 在循环中,绑定的是一个普通的HTML元素时 -->
      <li v-for="(item,index) of list" :key="index" :ref="index" @click="hanlderRefOnHTMLLoop(index)">
        {{item}}
      </li>
    </ul>
    <hr>

    <h3>ref在for循环中,作用于普同的HTML元素,$refs[index][1] 拿到的就是组件实例</h3>
    <ul>
      <li v-for="(item,index) in 5" :key="index" @click="hanlderRefOnComponentLoop(index)">
        <hello-world :ref='index'></hello-world>
      </li>
    </ul>


    <button @click="lookrefs">查看 this.$refs[bindValue] 数组</button>
    <button @click="lookLength">查看 this.refs[bindValue].length</button>
    <button @click="lookRefsArry0">查看 this.refs[bindValue][0]</button>
    <button @click="lookRefsArry1">查看 this.refs[bindValue][1]</button>

  </div>
lookrefs() {
        console.log(this.$refs[0])
      },
      lookLength() {
        console.log(this.$refs[0].length)
      },
      lookRefsArry0() {
        console.log(this.$refs[0][0])
      },
      lookRefsArry1() {
        console.log(this.$refs[0][1])
      }

结果:

why Array?
  1. this.$refs[0] 返回的是一个数组, 里面包含了两个元素:liDOM元素 & HelloWorld组件实例
  2. this.$refs[0].length 所以 .length = 2
  3. this.$refs[0][0] 拿到的是第一个 li DOM 元素
  4. this.$refs[0][1]) 拿到的是第一个 HelloWorld 组件实例.

总结

  1. ref 单纯的使用时,是绑定单个 DOM 元素 或者是 单个 组件实例.那么拿到的就是单个 DOM 元素或者是单个 组件实例.
  2. :ref 属性绑定表达式一般搭配 v-for 一起来使用,用于循环绑定 DOM 元素或者是 组件实例.
    • this.$refs[bindValue] 返回的是一个数组.
    • 通过 this.$refs[bindValue][index] 可以拿到对应的 DOM OR Component.
    • 如果在一个组件内有一个以上的 v-for & :ref 搭配使用,就需要用 this.$refs[bindValue][index] 去选择对应的是在哪一个 v-for里遍历的元素或者是组件.

相关文章

  • vue - ref

    vue - ref 说明 ref 是英文单词 reference,代表引用. 在 vue 中, ref 的使用分四...

  • 13-Vue特殊属性-ref

    一、Vue特殊特性 Vue的特殊属性主要有:key、ref、is、slot,ref是Vue特殊属性之一 ref:被...

  • Vue3 Ref 与 Reactive的区别

    Vue3 在组件中使用ref()或reactive()都可以创建响应式数据 Vue2 中操作 Vue3 ref r...

  • vue3中警告app.config.unwrapInjected

    [Vue warn]: injected property "formItemEmitter" is a ref ...

  • vue -- ref

    访问子组件实例或子元素 尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子...

  • vue3学习

    一、基础语法 1、双向数据绑定 vue2 vue3 2、ref, reactive ref:一般用在定义基本类型和...

  • Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取

    1,vue的双向数据绑定和Vue事件介绍 2,Vue中ref获取dom节点

  • Vue3.x ref属性

    获取DOM或者组件实例可以使用ref属性,写法和vue2.0需要区分开。 vue2.0的方式操作ref----数组...

  • vue学习更新。。。

    vue学习:props,scope,slot,ref,is,slot,sync等知识点 1、ref :为子组件指定...

  • 初探Vue的ref($ref)

    1、ref官方文档API2、我的理解就是ref定义在父组件中,且他有一个名称 这样在父组件的实例里就存在一个变量v...

网友评论

      本文标题:vue - ref

      本文链接:https://www.haomeiwen.com/subject/pugadqtx.html