vue 同一页面多次引用同一组件

vue elementui同一页面多次引用同一组件(导致组件只显示一个,且数据覆盖)

1: 需求是在同一页面有两个表格都带有分页功能,于是选择了将分页抽取成组件,一个页面调了两次组件;

2:需要往子组件里传不同的接口路径,在子组件里去写方法请求,将返回结果传给父组件,父组件拿到结果赋给表格data值,显示列表数据;

3:解决问题的关键:

//1.-----页面调用子组件,实例化两个

//第一处调用子组件
<pagination @get-list="getpagequery"  :getDataListURL="getqueryURL" :getDataListIsPage="true" :dataForm="dataForm"></pagination>                      //第二处调用子组件
<paginationConsults2 @get-list="getpageconsult" :getDataListURL="getconsultURL" :getDataListIsPage="true" :dataForm="dataForm"></paginationConsults2>import pagination from '@/components/page/page.vue';
import paginationConsults2 from '@/components/page/page.vue';components:{pagination,paginationConsults2},

//2.-------子组件返回给父组件值的时候出了问题

如下图:在用$get请求的时候,下面的funcation里不能用this,又恰恰因为这点为了整个页面统一,就定义了页面的全局 var that="",然后在created里写的 that=this; 导致父组件调用时一直有问题;

解决方法:在调用的方法里写 var that=this;

vue 同一页面多次引用同一组件相关推荐

vue可以多次导入吗_vue中同一个页面多次使用同一个组件的相互干扰问题
我们知道,vue有一个重要的理念就是组件化,即将重复使用的功能点抽提出来作为组件,需要使用的页面只需要引用该组件即可得到相应的功能点. 而组件化的一个重要特性就是作用域隔离,即一个组件实例拥有一个私有 ...
七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
做了两年前端开发，平时就是拿 Vue 写写页面和组件，简历的项目经历应该怎么写得好看？
无意间在知乎看见的,感觉讲得很有道理.看原文点这里 ------> 做了两年前端开发,平时就是拿 Vue 写写页面和组件,简历的项目经历应该怎么写得好看? 2年经验做的东西没什么技术含量,应 ...
vue中同一个页面多次复用同一个组件的相互干扰问题
如标题所说,我们在使用vue.js组件时,会出现在同一个页面会多次使用相同的组件,更特别的是,组件相同,但数据呈现上是完全不同的,但dom交互的处理是一样的,在这样的背景下,有可能引起组件数据跟需求不 ...
Vue引用其他组件，但组件某些部分不需要时的简单处理
项目开发时,我们会把多个地方重复使用的模块抽象成组件,提供给大家一起使用,但是使用组件的时候偶尔会遇见一些问题,比如说组件里只有某些东西自己并不需要,这个时候我们可以对组件进行简单的修改,而不影响其他 ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
vue 引用网络css_vue如何引用其他组件（css和js）
1.vuejs组件之间的调用components 注意:报错Do not use built-in or reserved HTML elements as component id: 修改组件的名字 ...
Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用把公共组件放在 app.v ...
vue父组件引用子组件方法显示undefined问题原因及解决方法
vue父组件引用子组件方法显示undefined问题原因及解决方法参考文章: (1)vue父组件引用子组件方法显示undefined问题原因及解决方法 (2)https://www.cnblogs. ...

vue 同一页面多次引用同一组件

vue 同一页面多次引用同一组件相关推荐

最新文章

热门文章