大佬教程收集整理的这篇文章主要介绍了vue.js – VueJS 2对多个组件的辩论,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
watch: { data: { handler: function () { this.processData() },deep: true } },methods: { processData: debounce(function () { console.log(this.id) },250),
问题是debounce有效,所以它只在最后一个子组件上执行.
我找到了一个debounce功能的解决方案,可以接受额外的id debounceWithId
但问题是,如果我指定此函数如下:
@H_104_2@methods: { processData: debounceWithId(function () { console.log(this.id) },250,this.id),最后一个this.id未定义.
在多个组件中使用去抖动的正确方法是什么,因此该函数会在每个组件上单独触发?
console.clear() function debounce(func,wait,immediatE) { var timeout; return function() { console.log("Called from component ",this._uid) var context = this,args = arguments; var later = function() { timeout = null; if (!immediatE) func.apply(context,args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later,wait); if (callNow) func.apply(context,args); }; }; Vue.component("doesntwork",{ props:["value"],template:`<div>Component #{{_uiD}} Value: {{innervalue}}</div>`,data(){ return { innerValue: this.value } },watch:{ value(newVal){ this.processData(newVal) } },methods:{ processData: debounce(function(newVal){ this.innerValue = newVal },1000) },}) new Vue({ el: "#app",data:{ parentValue: null,} })
<script src="https://cdnjs.cloudFlare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> <script src="https://unpkg.com/vue@2.4.2"></script> <div id="app"> Type some text. Wait one second. Only the *last* component is updated.<br> <input type="text" v-model="parentValue"> <doesntwork :value="parentValue"></doesntwork> <doesntwork :value="parentValue"></doesntwork> <doesntwork :value="parentValue"></doesntwork> </div>
基本上这里发生的是debounced函数是在编译组件时创建的,并且组件的每个实例共享相同的去抖动函数.每种情况的背景都不同,但功能相同.我在生成的debounced函数中添加了一个console.log,以便您可以看到所有三个组件共享相同的功能.在这种情况下,该功能正在做它的设计目的;它会在经过一段时间后执行一次,这就是为什么只更新最后一个组件的原因.
要绕过这种行为,您需要为每个组件提供独特的去抖功能.这有两种方法可以做到这一点.
方法一
您可以使用占位符的数量初始化processData方法.
@H_104_2@methods: { processData(){} }然后,在创建的生命周期事件中,将processData方法更改为debounced方法.
created(){ this.processData = debounce(function(){ console.log(this.id) },250) }
这将为每个组件提供独特的去抖功能,并且应该处理只有最后一个组件正常工作的问题.
以下是从上面的示例修改的示例.
console.clear() Vue.component("works",data(){ return { innerValue: this.value,} },methods:{ processData() {} },created(){ this.processData = _.debounce(function(newVal){ this.innerValue = newVal },1000) } }) new Vue({ el: "#app",} })
<script src="https://cdnjs.cloudFlare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> <script src="https://unpkg.com/vue@2.4.2"></script> <div id="app"> Type some text. Wait one second. <em>All</em> components are updated.<br> <input type="text" v-model="parentValue"> <works :value="parentValue"></works> <works :value="parentValue"></works> <works :value="parentValue"></works> </div>
方法二
感谢@RoyJ的建议.您可以在数据中定义processData方法.通常你不这样做是因为你不经常需要函数的多个副本,这就是组件定义的方法部分存在的原因,但是在这种情况下,你需要为每个组件提供一个独特的函数,你可以在数据函数中定义方法,因为为组件的每个实例调用了数据函数.
data(){ return { innerValue: this.value,processData: _.debounce(function(newVal){ this.innerValue = newVal },1000) } },
以下是使用该方法的示例.
console.clear() Vue.component("works",processData: _.debounce(function(newVal){ this.innerValue = newVal },1000) } },}) new Vue({ el: "#app",} })
<script src="https://cdnjs.cloudFlare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> <script src="https://unpkg.com/vue@2.4.2"></script> <div id="app"> Type some text. Wait one second. <em>All</em> components are updated.<br> <input type="text" v-model="parentValue"> <works :value="parentValue"></works> <works :value="parentValue"></works> <works :value="parentValue"></works> </div>
以上是大佬教程为你收集整理的vue.js – VueJS 2对多个组件的辩论全部内容,希望文章能够帮你解决vue.js – VueJS 2对多个组件的辩论所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。