例如:vue-fullscreen

<template>
<div class="Test">
<fullscreen ref="fullscreen" @change="fullscreenChange" >
       <el-button @click="toggle">全屏</el-button>
something
</fullscreen>
</div>
</template> <script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';// @ts-ignore
import fullscreen from 'vue-fullscreen';
Vue.use(fullscreen); @Component({})
export default class Test extends Vue {
toggle() {
(this.$refs.fullscreen as fullscreen).toggle(); // !!!! as后面的fullscreen是引入后组件的名称
} fullscreenChange(status: boolean) {
this.fullscreen = status;
}
}
</script> <style lang="less" scoped>
.Test{}
</style>

typescript无法识别vue中的$refs的更多相关文章

  1. vue中使用refs定位dom出现undefined?

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对 ...

  2. typescript整合到vue中的详细介绍,ts+vue一梭子

    通过vue-cli命令行安装vue项目,注意不要eslint 安装依赖 cnpm install typescript --save-dev cnpm install ts-loader --save ...

  3. vue中this.$refs可以拿到,但是里面的属性undefind的问题

    1.和vue的生命周期有关,必须要在从mounted开始拿,才能拿得到里面的Dom元素 2.想在element ui 对话框打开后取dom时,应该使用$nextTick,而不是直接使用this.$re ...

  4. 在 Vue 中使用 Typescript

    前言 恕我直言,用 Typescript 写 Vue 真的很难受,Vue 对 ts 的支持一般,如非万不得已还是别在 Vue 里边用吧,不过听说 Vue3 会增强对 ts 的支持,正式登场之前还是期待 ...

  5. vue中$refs的使用

    vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red

  6. 在Vue 中使用Typescript

    Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类 ...

  7. Vue 中使用 typescript

    Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类 ...

  8. TypeScript基础以及在Vue中的应用

    TypeScript推出已经很长时间了,在Angular项目中开发比较普遍,随着Vue 3.0的即将推出,TypeScript在Vue项目中使用也即将成为很大的趋势,笔者也是最近才开始研究如何在Vue ...

  9. Vue 中的 ref $refs

    ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...

随机推荐

  1. python 列表 【基本使用功能】

    #!/usr/bin/python # -*- coding: UTF-8 -*- # by Mercury_Lc list1 = list # 开个新的列表的方法 list2 = [] list1 ...

  2. mongodb的权限操作

    一.开启权限认证 1.windows下的mongodb开启权限认证 C:\Users\Administrator>sc delete MongoDB //原来创建的服务如果没有开启 则删除 [S ...

  3. redis基准性能测试

    1 测试目的 了解redis在不同情况下的性能表现,并分析其性能瓶颈,找出相应的解决方案. 2 redis基准测试概览 运行下列命令可以了解自己的redis服务器的基本性能指标. 通过loopback ...

  4. cesium地下模式(地表透明)4

    这篇博客主要罗列一下解决地下模式(地表透明)的相关资源 1.Cesium的Github仓库地下模式issue 有人提了这个问题,但是cesium官方没有解决这个问题,持续跟踪一下问题说不定哪天官方就解 ...

  5. docker 笔记--运行中的容器如何添加端口映射

    解决: iptables -t nat -A DOCKER -p tcp --dport ${YOURPORT_1} -j DNAT --to-destination ${CONTAINERIP}:$ ...

  6. CSS 之实现单行、多行文本溢出显示省略号

    一.单行文本省略 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 二.多行文本省略 实现方法: display ...

  7. mybatis设置Map空值返回

    mybatis时,设置Map返回,当值为空时属性也会没有 在application.properties中加入下面配置,将会解决这个问题. #当查询数据为空时字段返回为null,不加这个查询数据为空时 ...

  8. 多线程-Thread和ThreadPool

    多线程原理 多线程都是基于委托的. 多线程优缺点 缺点: 1.导致程序复杂,开发调试维护困难,特别是线程交互. 2.线程过多导致服务器卡死,因为占用CPU 内存等资源. 优点: 1.良好的交互,特别对 ...

  9. 一个hin秀的小学三年级奥数题 [hin秀]

    ~~~~~~不知为何总会被小学的题虐哭QAQ,真的秀啊,毒害广大小朋友~~~~~~ 一个hin秀的小学三年级奥数题    [hin秀] 题目: 给出一个无限大的棋盘  n×n  (n>0 , 是 ...

  10. leetcode 127. Word Ladder、126. Word Ladder II

    127. Word Ladder 这道题使用bfs来解决,每次将满足要求的变换单词加入队列中. wordSet用来记录当前词典中的单词,做一个单词变换生成一个新单词,都需要判断这个单词是否在词典中,不 ...