精华内容
下载资源
问答
  • vue父组件数据更新,子组件没有变化。 在父子组件传参时,父组件将值传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,过一段时间后重新赋值,则发现子组件里面数据没有更新,这个时候需要在子组件...

    vue父组件数据更新,子组件没有变化。

     在父子组件传参时,父组件将值传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,过一段时间后重新赋值,则发现子组件里面数据没有更新,这个时候需要在子组件中加入watch 进行数据监听

    示例

    父组件
    
    
    <div :parenData ="datas"></div>
    
    <script>
    data(){
      return{
       datas:"1"
     }
    },
    methods:{
      changeData(){
        this.datas= "2";
     }
    },
    mounted(){
      let that = this;
      settimeout(()=>{
        that.changeData();
      });
    }
    </script>
    
    子组件
    
    <div>{{msg}}</div>
    
    <script>
    data(){
      return{
        msg:""
      }
    },
    watch:{
        parendData(n,o){ //n为新值,o为旧值;
          this.msg = n;
        }
    },
    props:["parendData"],
    mounted(){
      this.msg = this.parendData;
    }
    
    
    </script>

     

    展开全文
  • vue父组件数据更新子组件相关内容未改变 父组件 在父组件中,根据后台给的数据(数组),v-for生成子组件 <div class="exist"> <existProject :itemprop="item" v-for="(item, index) in getData" :...

    vue父组件数据更新子组件相关内容未改变

    父组件
    在父组件中,根据后台给的数据(数组),v-for生成子组件

    	<div class="exist">
                
                 
        	<existProject :itemprop="item" v-for="(item, index) in getData" :key="index" :index="index" @click="sendIdTogetData(index)" v-show="true"></existProject>
                
    	</div>
    

    子组件(existProject)

    <template>
     <!-- <transition name="el-zoom-in-center"> -->
      <div class="existProjectBox" v-show="show2">
          <div class="existContentBox">
              <div class="existContent">
                  <div class="existTitle">{{itemprop.title}}</div>
                  <div class="stateBox">
                      <span class="state">{{ status_tit }}</span>
                      <span class="number" v-if="itemprop.status==2">收集份数:{{itemprop.asyncCount}}</span>
                  </div>
                  <div class="tiemBox">
                      {{createtime}}
                  </div>
              </div>
          </div>
          <div class="existButton">
            <li v-if="itemprop.status==0" @click="turnEdit(itemprop.qid)">
                <i class="icon icon-edit"></i>
                <span>编辑</span>
            </li>
            <li v-if="itemprop.status==0" @click="turnSend(itemprop.qid)">
                <i class="icon icon-send"></i>
                <span>发布</span>
            </li>
            <li v-if="itemprop.status==2 ">
                <i class="icon icon-data"></i>
                <span>数据</span>
            </li>
            <!-- <li v-if="itemprop.status==2 ">
                <i class="icon icon-data"></i>
                <span>暂停</span>
            </li>
            <li v-if="itemprop.status==2 ">
                <i class="icon icon-data"></i>
                <span>终止</span>
            </li> -->
            <li @click="delItem(itemprop.qid)">
                <i class="icon icon-other"></i>
                <span>删除</span>
            </li>
          </div>
      </div>
     <!-- </transition> -->
    </template>
    
    <script>
    import axios from 'axios'
    export default {
        data(){w
            return{
                createtime:'',
                status_tit:'',
                show2:true
            }
        },
        props:['itemprop'],
        methods:{
            turnEdit(id){
                debugger;
                console.log(id)
                axios.defaults.headers.common['token'] = JSON.parse(window.localStorage.getItem('token'))
                axios.get('/question/'+id)
                .then(response => {
                    console.log(response);
                    var obj = response.data.data;
                    var contents = obj.contents;
                    for(let i = 0; i < contents.length; i++){
                        obj.contents[i].component = this.$options.methods.initType(obj.contents[i].type)
                    }
                    console.log(obj)
                    window.localStorage.setItem('workInfoList', JSON.stringify(obj));
                    this.$router.push({
                        path: '/edit',
                        query: {
                            id: id
                        }
                    })
                    window.location.reload()
                })
                .catch(error => {
                    console.log(error)
                })
            },
            turnSend(id){
                debugger;
                console.log(id)
                axios.defaults.headers.common['token'] = JSON.parse(window.localStorage.getItem('token'))
                axios.get('/question/'+id)
                .then(response => {
                    console.log(response);
                    var obj = response.data.data;
                    console.log(obj)
                    window.localStorage.setItem('workInfoList', JSON.stringify(obj));
                    this.$router.push({
                        path: '/sendProject',
                        query: {
                            id: id
                        }
                    })
                    window.location.reload()
                })
                .catch(error => {
                    console.log(error)
                })
            },
            delItem(id){
              this.$confirm('此操作将删除该文件进入草稿箱, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
              .then(() => {
                
                axios.defaults.headers.common['token'] = JSON.parse(window.localStorage.getItem('token'))
                axios.delete('/question/'+id)
                  .then(response => {
                    console.log(response)
                    // this.show2 = false
                    this.$parent.getPage();
                  })
              })
              .catch(error => {
                  console.log(error)
              })
            },
            initType(str){
              switch(str){
                  case 1:return 'Radio';
                  case 2:return 'check';
                  case 3:return 'gapFill';
                  case 4:return 'level';
                  case 5:return 'photoInput';
                  case 6:return 'Rate';
                  case 7:return 'remark';
                  case 8:return 'selectChoice';
                  case 9:return 'sort';
                  case 10:return 'tableNumber';
                  case 11:return 'temp';
              }
            },
            
        },
        mounted(){
            // console.log(this.itemprop.createTime)
            var transformTime = new Date(this.itemprop.createTime)
            this.createtime = transformTime.toLocaleString();
            console.log(this.createtime)
        },
    
    }
    </script>
    
    

    因为有多条数据,所以有分页处理,在第一页中数据显示正常,但是在获得第二页数据并赋值给父组件的data后,子组件的信息保留的还是第一页的信息

    解决方法,使用watch深度监听

        watch:{
            itemprop:{
                handler(n,o){ 
                    console.log(this.itemprop);
                    var status = this.itemprop.status;
                    var showCondition = this.itemprop.showCondition;
                    // debugger;
                    this.status_tit = (function(status,showCondition) {
                        if(status==0) {
                            
                            return '未发布';
                        }
                        if(status==2 && showCondition==1)
                        {
                            // 已发布
                            return  '收集中';
                        }
    
                        if(status==2 &&showCondition==0)
                        {
                            // 暂停
                            return '已暂停';
                        }
    
                        if(status==2 &&showCondition==-1) {
                            // 终止
                            return '已终止';
                        }
    
                        if(status==2 &&showCondition==2) {
                            // 问卷发布结束
                            return '已结束';
                        }
                    })(status,showCondition)
                },
                deep:true,
                immediate:true,
            }
    
        }
    

    watch可以监听子组件的数据变化,数组或者对象要用深度监听,字符串什么的不用深度监听,这样就可以在分页切换数据后,就不会保留原有的信息,而是新的信息了

    展开全文
  • vue父组件改变子组件数据

    千次阅读 2020-04-30 14:02:24
    vue父组件向子组件通信,父组件数据改变,子组件数据并未发生改变 解决方案 起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props...

    业务场景
    vue父组件向子组件通信,父组件数据改变,子组件数据并未发生改变

    解决方案
    起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作

    后面,通过vue通过监听父组件传过来的值,来改变子组件的值

    子组件代码

    
    <script>
    export default {
        props:{
            data:{
                type:Array
            }
        },
        data(){
            return{
                list:[]
            }
        },
        mounted() {
            //data为父组件传过来的数据
            this.list = this.data
        },
        watch:{
            data:{
                immediate: true, 
                handler(val) {
                    this.list = val;
                }
            }
        }
        
    }
    </script>
    

    父组件代码

    <template>
        <div>
            <!-- 一定要v-if,否则子组件已经渲染了,却没有数据 -->
            <app-main v-if="dataList.length>0" :data="dataList"></app-main>
        </div>
    </template>
    
    <script>
    import { AppMain } from '@/components/AppMain';
    export default {
      name: "user",
      components: {
        AppMain
      },
      data(){
          return{
              dataList: []
          }
      }
    };
    </script> 
    
    展开全文
  • Vue父组件获取子组件数据

    万次阅读 2019-04-29 18:54:55
    方法一、从父组件调用子组件方法获取数据 1、子组件addindex.vue写一个方法,返回要用的数据 methods: { // 父组件获取数据 getVal () { return this.procedure } } 2、在父组aindex.vue件中获取值 <...

    方法一、从父组件调用子组件方法获取数据

    1、子组件addindex.vue写一个方法,返回要用的数据

    methods: {
        // 父组件获取数据
        getVal () {
          return this.procedure
        }
    }

    2、在父组aindex.vue件中获取值

    <ProcedureEdit ref="procedureEdit"></ProcedureEdit>
    import ProcedureEdit from 'pages/procedure/add/addindex'
    methods: {
        handleEdit () {
            let oldProcedure = this.$refs['procedureEdit'].getVal();
            console.log(oldProcedure)
        }
    }

    方法二、子组件调用父组件方法通过传值,将子组件的值传到父组件

    1、子组件addindex.vue,其中true就是传的值,也可以传变量

    methods: {
        // 父组件获取数据
        Val () {
          m.$emit('return-value', true);
        }
    }

    2、父组件aindex.vue

    <ProcedureEdit @return-value="getVal"></ProcedureEdit>
    import ProcedureEdit from 'pages/procedure/add/addindex'
    methods: {
        getVal (result) {
            console.log(result)
        }
    }

     

    展开全文
  • 主要介绍了vue父组件异步获取数据传给子组件,需要的朋友可以参考下
  • 然后离开页面就清除定时器,也就停止请求 @hook:生命周期钩子=“触发的函数” 父组件监听子组件数据更新,也就是监听生命周期 ~ 来人! 上代码 ! // 父组件 <template> <div class="father"> ...
  • 主要介绍了vue父组件向子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码,需要的朋友可以参考下
  • 下面小编就为大家分享一篇vue父组件向子组件传递多个数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 父组件axjos获取数据,子组件使用props接收数据时,执行mounted的时候axjos还没有返回数据,而且mounted只执行一次,这时 props中接收的数据为空 解决方案:在对应组件中判断数据的长度 ...
  • 有时候需要父组件请求接口,然后把数据传递给子组件,页面渲染出来了,接口数据后面才返回出来,这样子组件就不是最新数据,导致页面数据显示错误。 props: { file_list: { type: Array, default() { return [] ...
  • 一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <!--<HelloWorld msg="Welcome to Your Vue.js App"/>--...
  • 我想在父组件上获取排子组件数据对象 ``` v-model="text" @getSearchName="getName"> v-for="(item, index) of dataList" :key="index" :value="item.value" :label="item.label"> ...
  • 下面小编就为大家带来一篇vue父组件中获取子组件中的数据(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 子组件获取父组件数据失败 获取父组件通过接口获取数据,然后传递给子组件, 子组件mounted打印时为空,但是父组件打印该数据不为空 原因是接口获取数据需要时间,子组件渲染完成,但是数据并未获取到,所以...
  • vue 父组件向子组件异步传值不更新问题 仅验证了父组件向子组件单向传值的有效性vue 父组件向子组件异步传值不更新问题问题描述1.添加v-if判断2.改变父组件、子组件生命周期循环顺序总结 仅验证了父组件向子组件单向...
  • 今天小编就为大家分享一篇关于vue中子组件传递数据父组件的讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 子组件中实现对属性的封装,方便父组件一键调用 {{ innerChildCompoentData }} export default { name: 'ChildComponent', props: { childCompoentData: { type: Object, default() { return {} } } }, ...
  • 1、父组件 使用 Math.ramdom() 2、子组件获取 然后监听这个ramdom变化,处理子组件的更新 转载于:https://www.cnblogs.com/ajaxlu/p/11433629.html...
  • 需求是这样的,子组件是一个input,父组件调用子组件填写信息提交后,要清空input填写的值,在父组件中直接置空起不到作用 然后用到了this.$refs 给子组件设置ref 然后this.$refs.名字.子组件方法() 直接调用子组件...
  • 主要介绍了vue子组件使用自定义事件向父组件传递数据的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue父组件和子组件间怎么进行数据传递 父组件传递数据给子组件(可以通过props属性来实现): 由于组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件...
  • 在本篇文章里小编给大家整理的是一篇关于vue父组件给子组件的组件传值provide inject的方法,需要的朋友们学习下。
  • 如何把父组件动态传递ajax数据,并更新子组件的内容 注意: 在父组件中获取ajax数据,由于是异步获取,所以子组件mounted阶段,ajax仍未完成请求,所以使用:bind方法传递到子组件的数据获取为undefined   ...
  • Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$...
  • 主要为大家详细介绍了Vue父组件如何获取子组件中的变量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue组件数据变化同步到父组件

    千次阅读 2019-05-08 11:31:40
    方法:通过watch监听子组件数据变化 1.父组件中注册方法 <Child @getChildValue="getChildValue"></Child> 2.子组件中通过watch监听数据变化,数据变化时通过$emit来触发方法传参 <template> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,590
精华内容 20,236
关键字:

vue父组件数据更新

vue 订阅