el-date-picker给父组件传值的问题

Question

如何讲el-date-picker组件里的日期字符串传给父组件？
我看到老师的代码里有这样的配置：

<el-date-picker
                                type="daterange"
                                v-model="date"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="small"
                                unlink-panels
                                :picker-options="pickerOptions"
                                class="sensor-view-date-picker"
                        />

并且看到了老师的代码里有传值的语句：

 onClick(picker) {
                            const start =new Date()
                            const end =new Date()
                            picker.$emit('pick',[start,end],true)
        
                        }

所以我在父组件里试图监听上面那段代码中 picker.$emit(‘pick’,[start,end],true)传的值但是失败了。请问老师应该怎么做？

Answer 1

扬_灵 2020-09-11 17:56:00

同学你好，在项目中这里的picker表示的是那个日期组件的元素，而不是我们组件的实例，你可以在这里打印一下就知道了，如果想要把日期字符串传递给父组件可以从父组件那边接收一个方法在子组件中监听日期组件值得变化，当子组件的值发生变化的时候通过this.$emit(‘xxx’,data)这种方式传递过去。如果不能解决你的问题，可以继续追问。

• 提问者 慕慕1545788 #1

  我就是从父组件那边接收一个方法在子组件中监听日期组件值得变化，当子组件的值发生变化的时候通过this.$emit(‘xxx’,data)这种方式传递过去。但是没有成功。老师能不能给个代码？

• 扬_灵 回复 提问者 慕慕1545788 #2

  同学你好，如果你的方法是上面的 onClick(picker)方法，这里的picker并不是当前实例的this,你可以在你的函数中打印一下this.$emit(‘xxx’,data)看看this中是否有你调用的那个方法

• 提问者 慕慕1545788 回复 扬_灵 #3

  不是很理解这个picker为啥没定义，它有什么用。刚才把picker.$emit('pick',[start,end],true)换成了this.$emit('pick',[start,end],true),发现点击那个日期选择组件的当天的快捷键的时候，无法选择当天的日期。后来改回picker.$emit('pick',[start,end],true)后就可以选择当天日期了。老师能不能代码说明一下，具体怎么使用这个时间组件，怎么传值，我在网上找了一些教程但是传值失败了。上面说的的“picker并不是当前实例的this”是如何理解，能否给一个完整的答案。

点开查看后面1条评论