在父组件中引入儿子 <son></son>,在son这个标签中添加ref="sonDate",
(sonDate可以自定义任何单词,包括a,或者b,尽量语义化一点)
通过挂载后this.$refs.sonData可以获取到这个标签son的实例对象,也就是子组件的实例对象,通过this.$refs.sonData.name可以获取到来自子组件的name的值,
详情请看下面代码
当子组件有点击事件"sayHello“,输出为holl,那么可以通过父组件
this.$refs.sonData.sayHello()来打印子组件的值,此时子组件无需在进行绑定点击事件,因为父组件通过引入的子组件<son></son>添加了ref,已经获取得到了子组件的实例对象(也就是说,父组件控制了子组件,)
<template>
<son ref="sonDate"></son>
</template>
<script>
import son from './components/son.vue'
export default {
components:{
son
}
mounted () {
const sonDate= this.$refs.sonDate;
console.log(sonDate.name); // this is son
sonDate.sayHello(); // hello
}
}
</script>
<template></tempelate>
<script>
export default {
data () {
return {
name: 'this is son'
}
},
methods: {
sayHello () {
console.log('hello')
}
}
}
</script>