精华内容
下载资源
问答
  • 如题,做了一个分页功能,element里面的分页,已经有了页码改变、每页数量改变的change事件,这样如果当页码改变、每页数量改变的时候,又要在methods里面写change来根据改变的值来...一、子组件: 1.这个绑定了每...

    如题,做了一个分页功能,element里面的分页,已经有了页码改变、每页数量改变的change事件,这样如果当页码改变、每页数量改变的时候,又要在methods里面写change来根据改变的值来获取分页,这样就很麻烦,如果没个页面都有分页,这样就要在methods里面多写change事件。
    想到了一个解决方法,就是把element的分页封装成一个组件,具体思路如下:

    一、子组件:

    1.这个绑定了每页数量改变的事件,

    handleSizeChange
    
    handleSizeChange(index) {
          this.query.length = index
        },
    

    2.这个绑定了当前页码改变的事件

    handleCurrentChange
    
    handleCurrentChange(index) {
          console.log(index)
          this.query.start = index
        }
    

    3.最重要的数据,这里是当前页码和每页数量,

    query: {
            start: 1,
            length: 10
          }
    

    4.页码跟数量改变是在子组件中完成的,写个watch,然后实时把query传递给父组件

    watch: {
        query: {
          handler(val, oldVal) {
            this.$emit('changeData', this.query)
          },
          deep: true
        }
      },
    

    5.完整子组件代码

    <template>
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="query.start"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="query.length"
            layout="sizes, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
    </template>
    
    <script>
    export default {
      name: 'pagination',
      props: {
        size: {
          type: Number,
          default: function() {
            return 10
          }
        },
        total: {
          type: Number,
          default: function() {
            return 10
          }
        },
        start: {
          type: Number,
          default: function() {
            return 1
          }
        }
      },
      created() {
        this.query = {
          start: this.start,
          length: this.size
        }
      },
      data() {
        return {
          query: {
            start: 1,
            length: 10
          }
        }
      },
      watch: {
        query: {
          handler(val, oldVal) {
            this.$emit('changeData', this.query)
          },
          deep: true
        }
      },
      methods: {
        handleSizeChange(index) {
          this.query.length = index
        },
        handleCurrentChange(index) {
          console.log(index)
          this.query.start = index
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    二、父组件

    1.先引入组件,组件位置根据自己的而定

    import pagination from '../../components/table-pagination/pagination'
    

    2.然后注册组件

    components: { pagination },
    

    3.使用组件

    <pagination
              :size="query.length"
              :total="total"
              :start="query.start"
              @changeData="getList($event)"
              />
    

    组件传递的参数:
    在这里插入图片描述
    在这里插入图片描述
    4.如何获取子组件传递过来的query对象?
    1)父组件获取
    注意:
    这里的changeData跟子组件中$emit发送的地方要相同!
    在这里插入图片描述
    2)子组件部位
    注意:this.$emit('changeData',this.query)
    changeData就是父组件中子组件部位注册的自定义事件,this.query就是要传递的值
    在这里插入图片描述
    3)我的获取分页的函数就是getList(query),直接在自定义事件中写@changeData="getList($event)"

    三、大功告成
    在这里插入图片描述
    这样每当子组件中query的值改变之后,父组件都会执行分页查询请求,就可以实时更新了!

    后记:自定义事件,可以做很多事情,比如,点击子组件按钮,传递参数,然后父组件使用这个参数来做什么事情,当整个页面的数据量、逻辑实在是太庞大的时候,就可以把整个也面分成一个个小组件来,这样就不会显得页面庞大复杂了…

    展开全文
  • 正常情况下,更多推荐的是利用vuex来进行父子组件间的状态变化监听,毕竟vue是支持单向数据流的,违背了这个特性,一是不好维护,二是耦合性降低了,但是否没有了vuex,子组件就难以主动根据父组件的变化变化呢?...

    一、使用背景

    正常情况下,更多推荐的是利用vuex来进行父子组件间的状态变化监听,毕竟vue是支持单向数据流的,违背了这个特性,一是不好维护,二是耦合性降低了,但是否没有了vuex,子组件就难以主动根据父组件的变化而变化呢?这里探讨一下可行的办法,供大家思考。

    二、实现原理

    其实子组件往外传递数据,不外乎借用$emit的方法。试想像一个场景,比如说开发一个定时组件,出发的按钮在子组件上,需求是需要点击按钮之后,外环的秒表先跑60秒,然后内环的子组件秒表才开始计算。
    这咋一看用vuex监听外环秒变化来给信号子组件就完事了,但是如果要使用$emit呢?其实用法也一样,但是这次我们传的参数,不再是数据,而是一个子组件自己在methods中定义的方法。

    三、例子

    子组件内:

    <template>
    <div>{{second}}</div>
    <div @click="start">开始计时</div>
    </template>
    <script>
    export default {
    	data(){
    		return {
    			second:0,
    			hasDone:false
    		}
    	},
    	watch:{
    		hadDone(){
    			if(this.hasDone === true){
    				setInterval(()=>{
    					this.count()
    				},1000)
    			}
    		}
    	}
    	methods:{
    		start(){
    			let judge = this.judge;
    			this.$emit('run',judge);
    		},
    		judge(boolean){
    			this.hasDone = boolean	
    		},
    		count(){
    			this.second += 1
    		}
    		
    	}
    }
    </script>
    

    父组件内:

    <template>
    <div>{{second}}</div>
    <child @run="already" />
    </template>
    <script>
    import child from "./components/child"
    
    export default {
    	components:{
    		child
    	}
    	data(){
    		return {
    			second:0,
    		}
    	},
    	methods:{
    	//func即为子组件中传来的函数judge,它接受一个布尔值为参数
    		already(func){
    			let time = setInterval(()=>{
    				if(this.second<60){
    					this.count()
    				}else{
    				//一旦父组件运行超过了60秒,那么就清除定时,并且调用judge方法,传入一个true过去改变子组件中hasDone的值,促使子组件监听函数生效,开始子组件的计时
    					window.clearInterval(time);
    					func(true)
    				}
    			},1000)
    		},
    		count(){
    			this.second += 1
    		}
    	}
    }
    </script>
    
    展开全文
  • vue使用sync时父组件数据变化子组件数据确没变化 解决方法: 那是因为子组件数据只更新一次,之后更改父组件的数据,子组件不再更新,所以我们要在子组件中watch监听父级传递的参数的变化 父组件: <...

    vue使用sync时父组件数据变化,子组件数据确没变化

     

    解决方法:

    那是因为子组件数据只更新一次,之后更改父组件的数据,子组件不再更新,所以我们要在子组件中watch监听父级传递的参数的变化

    父组件:

    <inline-editor :value.sync="content" ></inline-editor>

     

    子组件:

     

    props: {

         value: ''

       },

       data(){

         return {

           inlineVal: '',

         }

       },

       created: function(){

         this.inlineVal = this.value;

       },

    watch:{

             http://www.yayihouse.com/yayishuwu/chapter/2388

         },

    展开全文
  • 父组件的数据发生变化时,如何做到在子组件中实现实时监听并做出响应。</p>
  • vue子组件数据变化同步到父组件中

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

    方法:通过watch监听子组件数据变化

    1.父组件中注册方法

    <Child @getChildValue="getChildValue"></Child>
    

    2.子组件中通过watch监听数据变化,数据变化时通过$emit来触发方法传参

    <template>
        <div class="child">
            <p>子组件同步数据到父组件</p>
            <input type="text" v-model="childValue">
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
                childValue:''
            }
        },
        watch: {
            childValue(val){
                this.$emit("getChildValue",{value:this.childValue})
            }
        },
    }
    </script>
    
    展开全文
  • 前言 // files已上传的文件 ...利用watch监听组件传过来的某个数据变化,结果监听不到,搜索半天,尝试半天,发现这种方式只能监听基础类型的变量而这传递的是个数组。所以查了下还是做个总结吧。 普通基础
  • VUE中用props子组件监听组件数据变化 在不使用vuex的情况下,如何监听呢? 一开始想的是在子组件里的data中重定义props中接收的数据,再通过methods中定义的方法来监听,发现不可行,data里重定义的数据并不会...
  • vue组件数据更新,子组件没有变化。 在父子组件传参时,父组件将值传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,过一段时间后重新赋值,则发现子组件里面数据没有更新,这个时候需要在子组件...
  • 需求一个页面多个echarts图表,把echarts写出组件 通过props传值 第一种方法: 在父子间中 ...在echarts子组件 watch监听传过来的值 当值发生变化是就执行this.drawPie()方法,就不在mounted中执行 watch:{...
  • vue 改变数据 视图不会改变或者子组件监听不到数据变化的解决办法 this.$set(this.manages, 1 ,123) // 改变单个值 this.$set(this, "manages" ,{}) // 改变整个对象或数组
  • vue模糊查询,父组件通过props传值给子组件子组件通过watch监听数据变化,动态调用方法。 看代码片段 子组件 //接收的值 props:{searchValue:''} //监听数据变化调用方法 watch:{ searchValue(){ this.search_...
  • 组件 html <template> <view> <cylindrical :haveTask="totals"></cylindrical> </view> </template> <script> import cylindrical from '@/pagesB/componentsB/...
  • 父组件props数据发生变化子组件默认无法感知,因此需要手动实现子组件监听父组件变化的功能。 一般的值类型数据,可以直接使用watch监听: watch: { msg(newVal, oldVal){//对引用类型的值无效 console....
  • 父组件不通过事件监听子组件变化并取值背景介绍:一、子组件中添加监听二、将数据传到store三、getters返回值四、父组件调用getters 背景介绍: 最近在做一个版本数据管理系统,父组件中计算版本总分,需要从子组件...
  • 子组件:使用watch来响应数据变化,普通的监听方式,使用写一个监听函数,这种方式在对话框第一次打开的时候无法加载到数据。 后来采用hander+immediate的方式,改变watch的监听方法,将immediate设置为true,就...
  • VUE父子组件监听状态变化

    千次阅读 2019-05-30 15:31:05
    在不使用VUEX的情况下,通过props传值,父组件直接修改子组件的相关数据会报错。 这里以父组件弹框为例讲一下如何操作…… 父组件html <father @changingType="showDialog" :showPopup="showPopup" > <...
  • 父组件中给子组件传值 子组件中这么监听 发现监听不到数据变换 原本 我是这么写的 :iswtAdmin=“iswtAdmin” 当我更改父组件中传值为 :Admin_wt=“iswtAdmin” 时就检测到了 ...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 165
精华内容 66
关键字:

vue监听子组件数据变化

vue 订阅