方法一 // mixins.ts import { Vue } from "vue-property-decorator"; export class TableSelect extends Vue { selected: Array<any> = []; tableChange(val: Array<any>) { this.selected = val; } } // pagea.vue import { Component } from "vue…

注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这…

前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形式,其余情况均采用v-bind形式传递. 传入String类型 传入的值title为一个常量(静态prop)时,不加v-bind(或者:) <blog-post title="My journey with Vue"></blog-post> 传入的值title为一…

在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁 箭头函数: created () { setInterval(() => { console.log() // vue setInteval(function () { console.log() // window,因为setInterva…

箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁.   箭头函数: let timerOne = setInterval(() => { console.log(this);// vue }, 1000); let timerTwo = setInteval(function () { console.log(this); // window,因为setInterval()函数是window对象的…

错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解决办法: 1.利用Vue中的ref和$refs 来代替document.getElementById()获取该图…

前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :options="swiperOption2"> <swiper-slide v-for="(item, index) of showProduct" :key="index"> <el-row> <el-col :x…

使用方法及细节就不一一说了. 1.给input或者textarea绑定value时,出现失效的问题.解决方法:https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/84: 2.给input绑定disabled属性时,出现时而有效时而有效的问题.解决方法同上,也是domPropsDisabled={this.disabled} (假如你定义了disabled的话): 3.在封装高阶组件时,v-model出现问题!写法如下:解决…

一.问题产生背景: 子组件的一个方法: 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.…

首先在最外层div添加v-if="isReloadAlive",并创建变量isReloadAlive = true 随后添加provide()以及reload方法,如下: export default { provide() { return { reload: this.reload } }, data(){ isReloadAlive : true }, methods: { reload() { this.isReloadAlive = false; this.$nextTick…