【typeScript】vue + ts使用$refs调用函数报错

在父组件调用子组件方法的时候，经常会用到ref属性常规写法如下：<span ref="quickEntry"></span>子组件中的方法：selected() {console.log('我是子组件函数')},// 父组件调用子组件函数this.$refs.quickEntry.selecte...

K_Kamen_Yip

14060人浏览 · 2019-04-28 11:01:56

K_Kamen_Yip · 2019-04-28 11:01:56 发布

在父组件调用子组件方法的时候，经常会用到ref属性
常规写法如下：

<!-- 父组件标签设置ref属性 -->
<span ref="quickEntry"></span>

子组件中的方法：

selected() {
  console.log('我是子组件函数')
},

// 父组件调用子组件函数
this.$refs.quickEntry.selected()

但是，在ts中这样操作会报错

打印结果显示selected方法是存在的，但是ts没有正常识别

加上这个声明就可以正常识别了

$refs: {quickEntry: HTMLFormElement}

首次接触typescript，欢迎大牛们告知原理@-@

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^