如何在父组件接收DatePicker中的$emit触发的事件

[savoygu]

ElementUI version

^1.1.6

OS/Browers version

windows/Chrome 55

Vue version

^2.1.10

Steps to reproduce

父组件：

<date-picker @pick="loadData"></date-picker>
export default {
  methods: {
    loadData (date) {
      console.log(date)
    }
  },
  components: {
    'date-picker': datePicker
  }
}

子组件：

<el-date-picker
        v-model="value"
        type="daterange"
        placeholder="选择日期范围"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>

<script>
  export default {
    data () {
      let me = this
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
              me.changeDate([start, end]) // 在这里$emit
          }
        }
    },
    methods: {
      changeDate (date) {
        this.$emit('pick', date)
      }
    }
  }
</script>

What is Expected?

不借助changeDate再次$emit，实现向父组件传递选中的日期范围

What is actually happening?

去掉changeDate之后，无法检测到子组件date-picker中picker.$emit('pick', [start, end])

[Leopoldthecoder]

picker.$emit 是在 el-date-picker 实例上触发事件，但是你的 <el-date-picker> 标签上并没有监听这个事件。

[savoygu]

<template>
  <div>
    <div class="block">
      <el-date-picker
        v-model="value"
        type="daterange"
        placeholder="选择日期范围"
        :picker-options="pickerOptions"
        ref="elDataPicker"
        @pick="dateChanged">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              console.log(picker)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value: ''
      }
    },
    methods: {
      dateChanged (date) {
        console.log(date)
        this.$emit('changeDate', date)
      }
    },
    mounted () {
      console.log(this.$refs.elDataPicker)
      this.$refs.elDataPicker.$on('pick', function (date) {
        console.log(date)
      })
    }
  }
</script>

按照你所说的这种方式，无法做出打印

[Leopoldthecoder]

抱歉，看了一下，onClick 的参数 picker 并不是 el-date-picker 实例。所以 picker 上 emit 的事件外部接收不到，只能用你最开始的方法了。

[savoygu]

@Leopoldthecoder 谢谢，但用最开始的方式有局限性（点击日期面板上进行日期选择时无法触发自己写的$emit），通过”只在“<el-date-picker>标签上添加@change="$emit('changeDate')"已经解决了。

[lazybonee]

ElementUI version ^2.3.9

OS/Browers version windows/Chrome

Vue version ^2.5.3

Steps to reproduce 组件： <el-date-picker v-model="pickerValue[0]" align="right" type="date" placeholder="起始日期"></el-date-picker> <span>&nbsp至&nbsp</span> <el-date-picker v-model="pickerValue[1]" align="right" type="date" placeholder="结束日期" :picker-options="pickerOptions1"></el-date-picker> <script> export default { data () { return { pickerOptions1: { disabledDate (time) { return time.getTime() > Date.now() }, shortcuts: [{ text: '7天后', onClick: picker => { const start = new Date(this.pickerValue[0]) start.setTime(start.getTime() + 3600 1000 24 7) picker.$emit('pick', start) } }, { text: '30天后', onClick: picker => { const start = new Date(this.pickerValue[0]) start.setTime(start.getTime() + 3600 1000 24 30) picker.$emit('pick', start) } }, { text: '90天后', onClick: picker => { const start = new Date(this.pickerValue[0]) start.setTime(start.getTime() + 3600 1000 24 * 90) picker.$emit('pick', start) } }] }, pickerValue: [] } } } ` What is expected? 多个页面引用了date-picker插件，改了一个页面的时间其他页面不受影响。 What is actually happening? 在不同的页面用date-picker插件，在某个页面选择了日期，其他所有页面都会发生变化。