精华内容
下载资源
问答
  • 1在子组件中用watch()监听改变,不同的类型的要用不同的监听方法props: { echartStyle: { type: Object, default() { return {} }}, titleText: { type: String, default: '' }, tooltipFormatt...

    1在子组件中用watch()监听值的改变,不同的类型的要用不同的监听方法

    props: {
      echartStyle: {
        type: Object,
        default() {
          return {}
        }},
        titleText: {
          type: String,
          default: ''
        },
        tooltipFormatter: {
          type: String,
          default: ''
        },
        opinion: {
          type: Array,
          default() {
            return []
          }
        },
        seriesName: {
          type: String,
          default: ''
        },
        opinionData: {
          type: Array,
          default() {
            return []
          }
        }

    }

    //watch进行监听

    watch:{
      titleText:function(newValue,oldValue){
        this.getChange();
      },
      echartStyle:{
        handler(newValue,oldValue){
           this.getChange();
        },
        deep:true
      },
      tooltipFormatter:function(newValue,oldValue){
        this.getChange();
      },
      opinion:{
        handler(newValue,oldValue){
          this.getChange();
        },
        deep:true //深度监听
      },
      seriesName:function(newValue,oldValue){
        this.getChange();
      },
      opinionData:{
        handler(newValue,oldValue){
          this.getChange();
        },
        deep:true
      }
    
    },
    2 在父组件中用ref="str" 来声明组件,然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法
    来 重新渲染(暂时使用有bug,不能够及时渲染,父组件值已经改变了,但是子组件值仍然没有改变,不能够及时渲染)

       这个方法感觉props'接收数据在调用方法之后,明明父组件的值已经改变了,但是父组件在调用子组件方法时,数据仍然没有  接收到,调用之后才接收到,这个方法暂且没用,应该是声明ref的时候声明的是当前组件的实例,然后调用时调用的也是值未改变时的属性。这个没什么用,可以用来调用子组件方法。

    <pie-chart2   ref="pieChart"
      :echartStyle="echartStyle"  :titleText="titleText" :tooltipFormatter="tooltipFormatter"
      :opinion="opinion"  :seriesName="seriesName" :opinionData="opinionData"
    
    >
    </pie-chart2>
     
    refresh:function(){
      if(!this.bindData.data){
        this.bindData.data = this.bindData.configures;
      }
      this.bindData.id = this.bindData.moduleId ||'pir';
      if(this.bindData.data){
        alert(this.bindData.data.name);
        this.changeContent(this.bindData.data);
        this.getChartData(this.bindData.data);
        this.$refs.pieChart.getChange();
      }
    
    },

    3 在子组件上使用 v-if ="flag" (谢谢各位老哥的建议)

    初始flag:true

    修改data时

    changData(data){

    this.flag = false

    this.data =data

    this.$nexTick(()=>{

    this.flag = true;

    })

    }

      

      

    展开全文
  • vue父组件值刷新子组件刷新

    千次阅读 2020-03-19 13:48:12
    父组件: <pick-country v-show="modal_show" @func="getMsgFromSon(arguments)" :content="pick_content_show"></pick-country> method方法 //组件传值 getMsgFromSon(data){ const that = this; ...

    1.通过@func绑定事件,$emit('func',[])
    父组件:

    <pick-country v-show="modal_show" @func="getMsgFromSon(arguments)" :content="pick_content_show"></pick-country>
    

    method方法
    //组件传值

    getMsgFromSon(data){
    	const that = this;
    	setTimeout(() => { that.modal_show = data[0][0] }, 10)
    	setTimeout(() => { that.area_id = data[0][1] == '' ? that.area_id : data[0][1]}, 10)
    },
    

    子组件

    setTimeout(() => { that.$emit('func',[that.modal_show, '']) }, 500)
    

    2.通过prop属性,在子组件watch监听该属性的变化

    watch: {
    	'value': {
    		  handler (newVal) {
    			this.currentValue = newVal
    		  },
    		  deep: true,
    		  immediate: true,
    	}, 
     },
    
    展开全文
  • 一:在父组件中用ref=“com” 来声明组件,然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法来重新渲染,一定要写Vue.nextTick( [callback, context] ) 子组件this.$emit('checkcity', row) ...

    cityComponents是子组件,cityId是父组件传给子组件的值,getData是子组件的渲染数据方法

    一:在父组件中用ref=“com” 来声明组件,然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法来重新渲染,一定要写Vue.nextTick( [callback, context] )

    子组件this.$emit('checkcity', row)
    父组件

        checkcity(row) {
          this.cityId = row.id
          // DOM 更新后
          this.$nextTick(() => {
            this.$refs.cityComponents.getData()
          })
        }
    

    二:子组件用watch监听数据变化,重新渲染,更推荐这个方法

      watch: {
        cityId: {
          immediate: true, // 这句重要
          handler(val) {
            this.getData()
          },
        },
      }
    
    展开全文
  • 子组件改变父组件传递的 参数 不刷新子组件上 添加 v-if ② 父组件 监听数据 this.reFresh= false this.$nextTick(()=>{ this.reFresh = true }) ##具体实现 子组件 <template> <a-...

    子组件改变父组件传递的 参数 不刷新

    ① 子组件上 添加 v-if

    ② 父组件 监听数据

    this.reFresh= false  
     this.$nextTick(()=>{
     this.reFresh = true 
       })
    

    ##具体实现

    子组件

    <template>
          <a-input>
            <a-icon @mousedown="cleanClick"/>
            <span slot="suffix" v-show="!cleanInputType"> 分</span>
          </a-input>
     </template>
    
    cleanClick() {
      
      // 判断如果是关联小题 那么就开始让他的题型状态为false
    
      if (this.scoreParam.structureType) {
    
        this.scoreParam.multipleFlag = false;
        this.scoreParam.fillBlankFlag = false;
      }
      this.$emit('my-reFresh', this.scoreParam);
    },
    

    父组件

    <to-score-templeate
      v-if="reFresh"
      @my-reFresh="myReFresh"
     ></to-score-templeate>
    
    myReFresh(msg){
      this.reFresh= false
      this.$nextTick(()=>{
        this.reFresh = true
      })
      console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
    }
    
    展开全文
  • (可能有朋友会说使用Vue的set来强制刷新,但是强制刷新的是父组件的数据和页面,子组件依旧没有刷新) 我的办法是给子组件加一个key,得到公式 的后key也随之改变子组件也会跟着改变。如下图: timeRefusr的...
  • vue中父组件子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样会防止子组件意外改变父组件,从而数据流变的难以理解;另外,每次父组件的数据发生更新时,子组件的都会刷新到最新的数据,但...
  • 需求是这样的,子组件是一个input,父组件调用子组件填写信息提交后,要清空input填写的,在父组件中直接置空起不到作用 然后用到了this.$refs 给子组件设置ref 然后this.$refs.名字.子组件方法() 直接调用子组件...
  • 以下示例使用ElementUi作为演示 第一种($nextTick) $nextTick将回调延迟到下次 DOM 更新循环...//父组件 <template> <div> <el-table :data="tableData.slice(pagesize*(pagenum-1),pagenum*...
  • vue 子组件刷新父组件

    千次阅读 2021-01-08 14:05:48
    vue 子组件刷新父组件 1、通过 $emit 触发 //在组件中设置 @add = "add(val)" //组件中使用 this.$emit('add', newVal) 2. 使用$parent触发 //组件直接调用 this.$parent.getList()
  • 在父子组件传参时,父组件传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,过一段时间后重新赋值,则发现子组件里面数据没有更新,这个时候需要在子组件中加入watch 进行数据监听 示例 ...
  • 想把一个页面分成好多个组件拼起来,实现局部刷新的那种效果, 这是页面,点击父组件中的搜索栏组件,搜索栏组件调用父组件的列表组件,搜索和列表是兄弟组件 这里我用再调子的方式 把父组件的这个...
  • Vue父组件子组件传递一个动态的子组件如何保持实时更新实时更新? 由此展开vue中,watch的一个小总结
  • 父组件调用子组件中的方法 解决刷新子组件通过props从父组件接受的数据丢失问题 问题描述:如图:刚开往网页的时候,子组件中的查询条件的下拉框的数据是有的,但是一旦点击浏览器的刷新后,数据就丢失了. 说明:...
  • vue父组件数据更新子组件相关内容未改变 父组件父组件中,根据后台给的数据(数组),v-for生成子组件 <div class="exist"> <existProject :itemprop="item" v-for="(item, index) in getData" :...
  • 具体是问题是vue-cli项目里边的 父组件通过点击事件请求到数据,存储在 sessionstorage里边 ,点击事件过后子组件直接push出来 想 sessionstorage里的数据 在子组件中展示 试过 $children $ref ...
  • 问题:element-ui中table-column中有循环,cell又是使用template(scope)渲染的,当循环数据更新(push,splice,或者重新赋值)时,可能出现cell不变的情况,从而导致页面元素和循环数据对不上的报错问题 ...
  • 1.在提交commit组件里 ,先传一个暗号给父组件   2.接下来看父组件 获取暗号 并且标签里加一个 ref=“gmlist” ...3.父组件下写入方法,刷新列表   4.gmlist 子组件的方法 是长这个样子的 ...
  • 子组件中需要watch监听被调用方案,对变动的重新赋值即可,代码如下: 父组件: <CommentReply ref="child"></CommentReply> this.$refs.child.getComment(); 子组件: watch: { comments: ...
  • vue 父组件子组件实时更新

    千次阅读 2019-12-02 14:22:48
    今天做菜单管理时,需要在登录完成后请求到个人权限以及能看到的菜单,菜单栏是作为子组件在index.vue中注册的,而菜单栏需要的内容是index中请求继而传给它的,所以用到了vue中的。 <menubar :list=...
  • 改变父组件子组件生命周期循环顺序总结 仅验证了父组件子组件单向传值的有效性 问题描述 父组件待传递数据需通过ajax连接后台获取,所以当按照普通的父、子组件的数据传递方式,会产生父组件在获取到后台数据...
  • 项目问题介绍:父组件中填入各种查询条件,点击查询按钮查出符合条件的数据。其中,数据列表是引入的...父组件:这是父组件中如何引用的子组件。testParams是我需要传过去的参数对象。参数名是params。 组...
  • 今天碰到一个vue的问题,父组件子组件传值,在子组件可以打印出接收到的,但是,子组件没有显示: 两个可能: 1,组件未渲染; 2, 组件渲染了。只是数据是空值,新数据传过来,没有重新渲染; 第一种情况可以...
  • vue父组件子组件传对象,不实时更新解决

    万次阅读 多人点赞 2019-06-21 13:59:24
    思路1:就是让利用v-if的重新...2.在父组件添加如下方法; // 这是组件上写法 :<my-component v-if="someShow"></my-component> // 下边写在父组件的methods里 refesh:function(){ this.someShow...
  • 参数更新,子组件刷新不到可能有以下几个方面的原因 0、没加watch监听子组件参数变化 1、箭头函数 2、如果监听的参数为对象,可能因为没有深度监听, 选项:deep,为了发现对象内部的变化,可以在选项参数...
  • 使用vue进行开发时,如果要刷新当前路由,则调用router.go(0)方法即可。但是某些情况下,我们可能要求仅仅刷新某个组件,而不是路由,那么我们应该怎么做呢? 1.使用this.$forceUpdate()强制重新渲染 如果要在组件...
  • 两步走: ...2.父组件在template元素中引用子组件时 绑定属性 属性和 子组件中的 props:[] 数组中的属性对应起来 父组件写法: <template> <element> <br> <v-head...
  • 当我们在父组件子组件绑定数据后,再修改传递给子组件的相关属性时,子组件并不能及时更新数据.子组件的props其实接收到了更新事件,但是直接在data中 table: this.table 没有更新. 解决方法: 在子组件中的watch监听...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,061
精华内容 12,824
关键字:

vue父组件值改变刷新子组件

vue 订阅