基本用法
1、本页面获取dom元素
<template>
<div id="app">
<div ref="testDom">---我是textDom节点的内容---</div>
<button @click="getTest">获取testDom节点</button>
</div>
</template>
<script>
export default {
name: "index",
methods: {
getTest() {
console.log(this.$refs.testDom);
},
},
};
</script>
2.获取子组件中的data
index.vue
<template>
<div id="app">
<son ref="sonContent"></son>
<button @click="getSon">获取son组件中的值</button>
</div>
</template>
<script>
import son from '../components/son';
export default {
name: "index",
components:{
son
},
methods: {
getSon() {
console.log(this.$refs.sonContent.msg);
},
},
};
</script>
son.vue
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
name:'son',
data() {
return {
msg: "hello world"
}
}
}
</script>
三、调用子组件中的方法
index.vue
<template>
<div id="app">
<son ref="getSonFun"></son>
<button @click="getSon">获取son组件中的方法</button>
</div>
</template>
<script>
import son from '../components/son';
export default {
name: "index",
components:{
son
},
methods: {
getSon() {
this.$refs.getSonFun.getFun()
},
},
};
</script>
son.vue
<template>
<div>
</div>
</template>
<script>
export default {
name:'son',
data() {
return {}
},
methods:{
getFun(){
console.log('我是子组件中的方法呀!');
}
}
}
</script>