獲取本頁面dom元素

<template><div id="app"><div ref="testDom">11111</div><button @click="getTest">獲取test節點</button></div> </template><script> export default {methods: {getTest() {//輸出<div ref="testDom">11111</div>console.log(this.$refs.testDom)}} }; </script>

父組件獲取子組件中的數據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() {//輸出hello worldconsole.log(this.$refs.hello.msg)}} }; </script>

父組件調用子組件中的方法

子組件 <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>

子組件調用父組件方法：子組件使用emit? 父組件使用@

子組件 <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>

?

總結

以上是生活随笔為你收集整理的Vue中ref的用法：获取DOM 父获取子数据 父使用子方法 子调用父方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。