Vue element Switch @change事件死循环解决方式

在Vue项目中用了一个el-switch组件,点击后触发事件,做出对应的 *** 作.如果失败,swich再返回原来的值.

嗯.....逻辑上是没有错的.

错误使用方式一

<el-switch v-model="startWithSystem" @change ="OnAutoStart(startWithSystem)"></el-switch>

于是我看了文档,使用了change事件触发......

然后你就会发现,为什么风扇的转速特别快,浏览器无法点击了....

F12的log打印不断的在滚动.

哦...死循环了

错误使用方式二

于是想到了click事件

<el-switch v-model="startWithSystem" @click ="OnAutoStart(startWithSystem)"></el-switch>

使用@是不行的,不工作,

错误使用方式三

<el-switch v-model="startWithSystem" :click ="OnAutoStart(startWithSystem)"></el-switch>

:是工作起来了,但是....会执行很多次....应该是页面的任何点击都被捕获了..这样肯定不行

正确的方式

使用change事件是不行的,这样不论你点击修改还是js修改,都会触发,它自身的点击事件是无效的,

那么将其放入一个div中, 使用父容器的@click事件 ,就可以好好工作了

```

<div class="padRight" @click="OnAutoStart(startWithSystem)">

        <el-switch v-model="startWithSystem"></el-switch>

</div>

```

ref 目前使用过的三种方式：

1、在html的元素中使用rel，可在js中直接调用该元素，用this.$refs.（ref值） 获取到的是dom元素

2、在vue的组件上加rel，可在js中直接使用该组件包括该组件的方法，用this.$refs.（ref值）.方法名()

3、在v-for的循环列中使用rel

避坑：

v-for中使用rel需要绑定 变量 ，即v-bind:rel='变量名'

ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期  mounted(){} 钩子中调用 ，或者 在 this.$nextTick(()=>{}) 中调用 。

如果rel循环未绑定变量，那就$refs获取获取数组再循环得到使用即可

例子1：在html元素上使用

<div id="app">

    <h1 ref="h1ele">这是h1</h1>

    <hello ref="ho"></hello>

    <button @click="getref">获取h1元素</button>

</div>

获取注册过 ref 的所有组件或元素

methods: {

        getref() {

          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素

          console.log(this.$refs.h1ele.innerText)

          this.$refs.h1ele.style.color = 'red'// 修改html样式

          console.log(this.$refs.ho.msg)// 获取组件数据

          console.log(this.$refs.ho.test)// 获取组件的方法

        }

      }

例子2：

<html部分

<view class="example-body">

<button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部d出 popup</button>

<button class="button" type="primary" @click="togglePopup('center', 'popup')">中间d出 popup</button>

<button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部d出 popup</button>

</view>

<uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content">{{ content }}</text></uni-popup>

<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">

<view class="uni-tip">

<text class="uni-tip-title">警告</text>

<text class="uni-tip-content">这是一个通过自定义 popup，自由扩展的 警告d窗。点击遮罩不会关闭d窗。</text>

<view class="uni-tip-group-button">

<text class="uni-tip-button" @click="cancel('tip')">取消</text>

<text class="uni-tip-button" @click="cancel('tip')">确定</text>

</view>

</view>

</uni-popup>

<js部分

methods: {

togglePopup(type, open) {

switch (type) {

case 'top':

this.content = '顶部d出 popup'

break

case 'bottom':

this.content = '底部d出 popup'

break

case 'center':

this.content = '居中d出 popup'

break

}

this.type = type

this.$nextTick(() =>{

this.$refs['show' + open].open()

})

},

cancel(type) {

this.$refs['show' + type].close()

},

change(e) {

console.log('是否打开:' + e.show)

}

},

一般来讲获取DOM元素，需document.querySelector（".class"）获取这个dom节点，然后在获取元素的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的元素上绑定rel，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.元素绑定rel  这样就可以减少获取dom节点的消耗了

1.定义全局插件 pluginHaha.js

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

2.main.js全局引入并使用

3.组件中使用

原型方法：this.getDate()

全局方法：Vue.getDate()

---