vue中使用ts后,父组件获取执行子组件方法报错问题
一、问题产生背景:
子组件的一个方法:
update () {
this.$nextTick(() => {
this.ul_slots.forEach((ul, cur_slots_index) => {
if (ul.getAttribute("class").indexOf("select_slots") < 0) {
return;
}
let liHeight = ul.children[0].offsetHeight
ul.style.height = (liHeight * ul.children.length) + 'px'
});
});
}
父组件通过ref获取执行子组件的方法:
this.$refs.areapicker.update();
TS报错:

二、尝试解决
(1)将整个子组件实例发送给父组件接受,再调用
// 子组件发送事件,传本身实例
this.$emit('passpicker', this)
// 父组件接受事件
<areapicker2 @passpicker = "passpicker">
</areapicker2>
// 父组件js声明变量并接受传值
picker: any = '';
passpicker (picker: any) {
console.log(picker)
this.picker = picker;
}
// 父组件里执行子组件方法
this.picker.update();
vue中使用ts后,父组件获取执行子组件方法报错问题的更多相关文章
- Idea的类中使用实体类(有@Data注解)的Get/Set方法报错
今天从svn上面下了一个maven项目,导入到Idea中之后,发现有的类会使用实体类的Set/Get方法(全报错),导致该问题的原因就是因为实体类中没有这个方法,代码类似如下: @Data publi ...
- vue父组件如何向子组件中传递数据?
原文地址 props传参 父组件: <template> <parent> <child :list="list"></child> ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- vue中父组件给子组件传值,子组件给父组件传值
1.父组件传给子组件 父元素中 子元素中(通过props传值) 2.子组件传给父组件 子元素中(this.$emit(传过去的名字,传的参数)) 父元素中 通过changeShow的参数data 把修 ...
- vue父组件促发子组件中的方法
实现在父组件中促发子组件里面的方法 子组件: <template> <div> 我是子组件 </div> </template> <script& ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件
(标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...
- 如何在vue中使用ts
注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
随机推荐
- C#实现简单的 Ping 的功能,用于测试网络是否已经联通
/// <summary> /// 是否能 Ping 通指定的主机 /// </summary> /// <param name="ip">ip ...
- 002-创建型-05-原型模式(Protype)
一.概述 指原型实例指定创建对象的种类,并通过克隆这些原型创建新的对象 原型模式就是让类实现Cloneable接口,达到克隆原型类的方式. 1.1.适用场景 1.在创建对象的时候,我们不只是希望被创建 ...
- osg模型部分节点旋转
osg::ref_ptr<osg::Geode> CreateBox() { osg::ref_ptr<osg::Geode> geode = new osg::Geode; ...
- nginx在windows系统中如何启动、重启、停止
nginx在windows系统中如何启动.重启.停止 查看nginx的版本号:nginx -v 启动nginx:start nginx 快速停止或关闭nginx:nginx -s stop 正常停 ...
- SortedMap和TreeMap有什么区别?
SortedMap和TreeMap有什么区别 答: TreeMap的类的源码: public class TreeMap<K,V> extends AbstractMap<K,V ...
- 使用ClientScriptManager向客户端注册脚本
ClientScriptManager在非异步(就是说非AJAX)环境下使用的.如果要在异步环境下注册脚本应该使用ScriptManager的静态方法来注册(ScriptManager兼容异步于非异步 ...
- CentOS 7 vi常用命令
用vi打开一个yum文件 vi /usr/bin/yum 按 i 键后 进入insert模式,进入insert模式后才能进行修改 修改完成后 按esc键进入command模式, 然后:wq 保存文件 ...
- 2019年11月27日 Linux所学知识 总结
查看网络信息和网络状态 nmcli connection show 使用con-name参数指定公司使用的网络会话名称company,然后依次用ifname参数指定本机的网卡名称. 用autoconn ...
- uwp,右键浮出获取DataContext(数据上下文)
列表视图类控件,如ListView/GridView,有时项目需要按下右键浮出选项,来获取Item的DataContext. 下面的示例代码,事先我已经有了一个自定义类Video,并且已经绑定了数据源 ...
- SQL-TSQL
一.系统存储过程 常用 sp_helptext --查看可编程性(存储过程.函数.触发器.规则.默认值),表中(约束.触发器) EXEC sp_helptext f_M_Student 二.全局变量 ...