【收藏】Vue中ref和$refs的介绍及使用

た入场券 2023-10-04 10:53 19阅读 0赞

### 实例（通过ref特性调用子组件的方法） ###

**【1】子组件code：**

<template>
        <div>{
       {msg}}</div>
    </template>
     
    <script>
    export default {
      data() {
        return {
          msg: '我是子组件'
        }
      },
      methods: {
        changeMsg() {
          this.msg = '变身'
        }
      }
    }
    </script>
     
    <style lang="sass" scoped></style>

**【2】父组件code:**

<template>
      <div @click="parentMethod">
        <children ref="children"></children>
      </div>
    </template>
     
    <script>
    import children from 'components/children.vue'
    export default {
      components: { 
        children 
      },
      data() {
        return {}
      },
      methods: {
        parentMethod() {
          this.$refs.children  //返回一个对象
          this.$refs.children.changeMsg() // 调用children的changeMsg方法
        }
      }
    }
    </script>
     
    <style lang="sass" scoped></style>

[https://blog.csdn.net/qq\_38128179/article/details/88876060][https_blog.csdn.net_qq_38128179_article_details_88876060]

[https_blog.csdn.net_qq_38128179_article_details_88876060]: https://blog.csdn.net/qq_38128179/article/details/88876060

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习笔记：ref和$refs的使用

ue中有一个特殊的属性ref，可以给每一个标签使用，用来获取标签的元素，和jquery中给标签添加一个class或者id，然后在获取这个标签的元素一样，每一个标签可以根据...

男娘i/ 2024年04月17日 05:30/ 0 赞/ 84 阅读

相关【收藏】Vue中ref和$refs的介绍及使用

实例（通过ref特性调用子组件的方法）【1】子组件code： <template> <div>{ {msg}}</div>

た入场券/ 2023年10月04日 10:53/ 0 赞/ 20 阅读

相关 Vue中ref和$refs的介绍以及使用方法示例

一、在JavaScript中需要通过document.querySelector("\demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom

本是古典何须时尚/ 2023年01月18日 02:25/ 0 赞/ 165 阅读

相关 vue中ref和$refs的介绍及使用

文章目录 Vue中ref和$refs的介绍及使用 ref介绍 this.$refs介绍实例（通过ref特性调用子组件的方法

╰+攻爆jí腚メ/ 2022年12月29日 01:36/ 0 赞/ 211 阅读

相关 Vue中的$ref和$refs属性介绍与使用

除了自定义属性外，Vue实例还暴露一些有用的实例属性和方法，他们都有前缀$，以便和用户定义的属性和方法分开在Vue中一般很少会用到直接操作DOM，但不可避免有时

╰半夏微凉°/ 2022年11月04日 11:05/ 0 赞/ 259 阅读

相关 Vue中ref的使用

在jq时代，我们首要任务就是学习选择的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在Vue中，我们的编程理念发生了变化，变为了数据

╰半橙微兮°/ 2022年01月29日 02:55/ 0 赞/ 343 阅读

相关 Vue教程(ref和$refs的使用)

在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容 ref r

忘是亡心i/ 2021年11月10日 10:40/ 0 赞/ 420 阅读

相关 vue的ref和$refs使用

1. 基本用法：在当前页面中获取dom元素 <div id="app"> <button @click="getRef" ref="button">获

蔚落/ 2021年11月01日 17:36/ 0 赞/ 452 阅读

相关 vue中的ref和$refs的使用

ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。 ref 有三种用法：

ゝ一纸荒年。/ 2021年08月13日 20:43/ 0 赞/ 667 阅读

相关 vue中$refs的使用

第一种情况:获取dom html代码: ![20200420221511124.png][] js代码: ![20200420221548187.png][]

小鱼儿/ 2021年07月26日 17:44/ 0 赞/ 472 阅读