Vue中ref的用法：获取DOM 父获取子数据 父使用子方法 子调用父方法

获取本页面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>