文昌网站建设全包,网站开发代淘宝店铺装修,代理公司注册,网站空间 windows linux**问题#xff1a;**通过eventBus传递的参数#xff0c;在子组件的methods中无法通过this.使用。 **思路#xff1a;**考虑组件方法的执行顺序#xff08;vue生命周期执行顺序#xff09; **解决办法#xff1a;**在传递参数的组件外 this.$nextTick
this.$nextTick(() …**问题**通过eventBus传递的参数在子组件的methods中无法通过this.使用。 **思路**考虑组件方法的执行顺序vue生命周期执行顺序 **解决办法**在传递参数的组件外 this.$nextTick
this.$nextTick(() {Bus.$emit(updateOpt, opt, item)
})eventBus的使用
创建eventBus.js文件在需要传递消息的兄弟组件引入该js文件传递消息 bus.$emit(“test”,param1,param2…)接收消息 bus.$on(“test”,funciton({ //逻辑 }))
代码如下
!-- 父组件 --
templatediva/ab/b/div
/templatescript
import a from ./ePassList/a.vue;
import b from ./ePassEdit/b.vue;
export default {components: {a,b,},
}
/scriptstyle/style//eventBus.js文件
import Vue from vueexport default new Vue()!-- 子组件a 传递消息import Bus from ../eventBus.js; Bus.$emit(updateOpt, opt, item) --
templatedivel-table :datadataList sizesmall v-loadingloading border :header-cell-style{color: #495060,background-color: #f8f8f9,} styleborder: 1px solid #dddee1el-table-column typeindex label序号 width90 aligncenter/el-table-columnel-table-column propactivity_name label活动名称 aligncenter/el-table-columnel-table-column propactivity_type label活动类型 aligncenter/el-table-columnel-table-column propactivity_publisher label发布人 aligncenter/el-table-columnel-table-column propinsert_time label发布时间 aligncenter/el-table-columnel-table-column propupdate_time label更新时间 aligncenter/el-table-columnel-table-column propaction label操作 aligncenter fixedrightel-row slot-scopescopeButton typeprimary sizesmall clickoperate(editOpt, scope.row)编辑/ButtonButton typeprimary sizesmall clickoperate(detailOpt, scope.row)详情/ButtonButton typeprimary sizesmall clickonDelete(scope.row)删除/Button/el-row/el-table-column/el-table/div
/templatescript
import Bus from ../eventBus.js;
export default {methods: {//编辑,详情operate(opt, item) {console.log(opt, item);this.$emit(toEdit)this.$nextTick(() {Bus.$emit(updateOpt, opt, item)})},}
};
/scriptstyle/style!-- 子组件b 接收消息import Bus from ../eventBus.js; Bus.$on(updateOpt, () {}); --
template/templatescript
import Bus from ../eventBus.js;
export default {data() {return {operate: ,rowData: ,}},created() {Bus.$on(updateOpt, (opt, item) {console.log(opt, item, 11111);this.operate opt;this.rowData item;});},methods:{print(){console.log(this.operate,this.rowData)}}
};
/scriptstyle/style涉及到的知识点nextTick() nextTick(),是将回调函数延迟在下一次DOM更新数据过后进行调用。 简单的理解就是当数据更新之后DOM进行渲染之后将会自动进行执行该函数。 详细解读链接https://juejin.cn/post/6971017407733170184
