非Typescript下

子组件

//methods
consoleLog() {
  console.log('hello world');
  return '这里是子组件'
}

父组件

<Child ref="child">
	parent
</Child>
//methods
getChild(){
    let data = this.$refs.child.consoleLog() // data为返回值这里是子组件
}

Typescript下

子组件不变

//methods
consoleLog() {
  console.log('hello world');
  return '这里是子组件'
}

父组件

<Child ref="child">
	parent
</Child>
import Child from '@/components/Child.vue'
//methods
getChild(){
    // as Child 将this.$refs.child断言为引入的子类类型
    let data = (this.$refs.child as Child).consoleLog() 
}

typescript下直接使用 refs.child.方法 时,typescript预处理时找不到这个方法所以报错

解决方法为把数据断言成----子类类型


一个爱搞事情的前端,一个爱玩技术的程序员