其他---04vue中ref_心得技巧

上一篇: 通用组件：自动更新套件的使用过... 下一篇:web应用推送通知是如何实现的？手...

其他---04vue中ref

发布时间：2022-06-27 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了其他---04vue中ref，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1.获取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>

其他---04vue中ref

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

2. 获取子组件中的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>