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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

转载于:https://www.cnblogs.com/agen-su/p/11388621.html