vue中，用父子组件实现一个日期控件切换整个页面的数据（日期在父组件）

首先看我的这个案例，此处切换日期，整个页面切换数据，我的这个日期控件在父组件里面写的，我第一时间想到的方法是将父组件的这个日期切换事件传到子组件里面，用了很多方法，就是写不出来（最后我得出的结论时，父传子一般都时传值，传方法不好传，传值很方便），最后想到可以将子组件获取数据的方法放到一个方法里面，然后先在子组件调用一次，不然默认没有数据，然后这时候我们就可以将子组件的这个方法传到父组件里面， 子传父传方法比较方便，传的方法也比较多一点，我这里用到的是通过ref来传，首先在父组件里面给每个子组件定义一个ref，其次将默认的日期写在父组件，传到子组件，这里我就简写代码了，大家能看懂就行（如果父组件需要用到子组件很多方法的话，建议使用ref来传，因为ref传的时候不需要写任何方法，只要在子组件标签上定义ref，这时候父组件就可以拿到子组件所有的方法）

 

 

//父组件    首先引入KeyCard组件    然后再components
<key-card ref="keycard" :lastDayF="lastDay"></key-card>  //lastDay为默认的日期也是切换时候的日期

//获取需要的默认日期，我这里获取的是昨天的日期
let lastday = new Date(new Date().setHours(0) - 24 * 60 * 60 * 1000)
let lastdayYear = lastday.getFullYear() + ""
let lastdayMonth = (lastday.getMonth() + 1).toString().padStart(2,"0");
let lastdayDate = lastday.getDate().toString().padStart(2,"0");
this.date1 = lastdayYear + "-" + lastdayMonth + "-" + lastdayDate;  //这里得到的日期为 ××××-××-××
this.lastDay = this.date1

//接下来是日期方法里面要写的
inputChange(value) { //这里的value可以取到切换时的日期
    this.lastDay = value.taget.value  //将切换的日期赋值给 lastDay 然后传到子组件
    this.$nextTick(()+>{  // nextTick一定要写，不然的话切换的时候就会慢一拍，意思就是切换日期的时候，获取到的日期是上一次切换时的日期
//这个就是调用子组件的方法，切换日期的时候，子组件数据切换，日过有多个子组件的话，跟这个写法一样
        this.$refs.keycard.getEcharts()   //首先是用ref获取子组件的dom，可以直接取子组件里面的方法，这里我子组件获取数据的方法是getEcharts
    })
}

//子组件   先接收父组件传过来的日期  props
export default {
    props:['lastDayF']

    watch:{  //这里watch一定要写，不然子组件获取不到
        lastDayF:function(newValue,oldValue) {
            this.lastDay = newValue  // 我获取数据传的参数就是昨天的日期
        }
    }

    methods:{
        //获取数据方法   这个方法再created生命周期里面调用，不然默认没有数据  要是调用之后还没有数据的话，加个定时器
        getEcharts(){
            获取数据，参数为昨天日期，this.lastDay
        }
    }
}