zoukankan      html  css  js  c++  java
  • vue中ref的一些常见作用

    vue中的ref其实功能很强大,下面介绍一下如何使用。

    基本用法,本页面获取dom元素

    <template>
      <div id="app">
        <div ref="testDom">11111</div>
        <button @click="getTest">获取test节点</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        getTest() {
          console.log(this.$refs.testDom)
        }
      }
    };
    </script>
    
     
    image.png

    其实ref除了可以获取本页面的dom元素,还可以拿到子组件中的data和去调用子组件中的方法

    获取子组件中的data

    子组件

    <template>
      <div>
          {{ msg }}
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg: "hello world"
        }
      }
    }
    </script>
    

    父组件

    <template>
      <div id="app">
        <HelloWorld ref="hello"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          console.log(this.$refs.hello.msg)
        }
      }
    };
    </script>
    
     
    image.png

    调用子组件中的方法

    子组件

    <template>
      <div>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        open() {
          console.log("调用到了")
        }
      }
    }
    </script>
    

    父组件

    <template>
      <div id="app">
        <HelloWorld ref="hello"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          this.$refs.hello.open();
        }
      }
    };
    </script>
    
     
    image.png

    子组件调用父组件方法

    子组件

    <template>
      <div>
    </div>
    </template>
    
    <script>
    export default {
      methods: {
        open() {
          console.log("调用了");
          //  调用父组件方法
          this.$emit("refreshData");
        }
      }
    }
    </script>
    

    父组件

    <template>
      <div id="app">
        <HelloWorld ref="hello" @refreshData="getData"/>
        <button @click="getHello">获取helloworld组件中的值</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          this.$refs.hello.open()
        },
        getData() {
          console.log('111111')
        }
      }
    };
    </script>
    
     
    image.png

    未完待续



    作者:回不去的那些时光
    链接:https://www.jianshu.com/p/623c8b009a85
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    Virtualbox中不能为虚拟机打开一个新任务的原因及解决方法
    CSS 制作三角形原理剖析
    java 执行jar指定log4j.properties文件位置
    Git submodules
    IO模型
    Error during WebSocket handshake 403
    Proto(协议缓冲区)
    gRPC
    Node.js 模块机制
    Node.js 模块机制及常见面试问题解答
  • 原文地址:https://www.cnblogs.com/agen-su/p/11388621.html
Copyright © 2011-2022 走看看