vue父组件对子组件事件监听

父子组件间通信与数据监听

最新推荐文章于 2024-07-03 09:44:52 发布

原创最新推荐文章于 2024-07-03 09:44:52 发布 · 636 阅读

1 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

12 篇文章

订阅专栏

该博客介绍了Vue中父子组件间的通信方式，通过`$emit`触发事件传递数据到父组件，并在父组件中使用`@`监听事件并响应。同时展示了如何使用`watch`监听数据变化，实现数据更新后的接口调用。

子组件

computed: {
    list() { 
    	this.$emit('allListMsg', val); // 给父组件发送消息
      	return val 
    },

父组件

	<PJDLCalendar
      @allListMsg="allListMsg"
    />
  data() {
    return {
      allList: [],
    };
  },
  watch:{
	    allList(val){ // 监听数组的变化 
	      console.log('watch---',val)
	      this.getWaybillStatisticsList(val[0].value, val[41].value)
	    }
	  },
    methods: {
	    allListMsg(val){ // 触发子组件传过来的日历数组
	      console.log(val)
	      this.allList = val;
	    },
	    getWaybillStatisticsList(beginDate, endDate){
	    	//接口处理
	    }
    }