1.vue中的ref作用
（1）基本作用是在本頁(yè)面獲取dom元素
<template>
? <div id="app">
? ? <div ref="testDom">11111</div>
? <button @click="getTest">獲取節(jié)點(diǎn)</button>
? </div>
</template>
<script>
export default {
? methods: {
? ? getTest() {
? ? ? console.log(this.$refs.testDom)
? ? }
? }
};
</script>
（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>
（3）還可以去調(diào)用子組件中的方法
子組件如下
<template>
? <div></div>
</template>
<script>
export default {
? methods: {
? ? open() {
? ? ? console.log("調(diào)用成功")
? ? }
? }
}
</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>
子組件調(diào)用父組件方法
子組件如下
<template>
? <div></div>
</template>
<script>
export default {
? methods: {
? ? open() {
? ? ? console.log("調(diào)用成功了");
? ? ? //? 調(diào)用父組件方法
? ? ? 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('我是程序員')
? ? ? ? }
? ? ? }
? };
? </script>
以上代碼展示效果圖我就不貼了淳地，感興趣的朋友可以試一下
