如何从Vue 2中的父组件获取子组件的观察者的更新值？

Question

我有两个处于父子关系的组件。在子选择组件中，我为当前选择的值定义了观察器，并且我希望父级在其更改时获取更新的值。我试图使用事件，但父母只能听自己的虚拟机。

在子组件中

watch: {
  selected (value) {
    this.$emit('selectedYearChange', value)
  }
}

在父母

中

mounted () {
  this.$on('selectedYearChange', function (value) {
    this.selectedYear = value
  })
}

由于我上面提到的原因，这显然不起作用 我无法在文档中找到相关的示例。

Answer 1

HTML：

<Parent>
  <Child @selected-year-change=HandleChange(data)></Child>
</Parent>

Javascript /子组件：

watch: {
  selected (value) {
    this.$emit('selectedYearChange', value)
  }
}

Javascript / Parent Component：

   HandleChange: function(data){}

祝你好运。也许工作！

Answer 2

您可以在子组件元素本身上设置一个事件侦听器，在子组件元素中使用它，并将其传递给要执行的方法

//parent component
<div id="app>
    <child-comp @selected-year-change='changeYear'></child-comp>
</div> 

在您的父组件中，使用方法changeYear更改`selectedYear＆＃39;

的值

methods:{
    //you get the event as the parameter
    changeYear(value){
        this.selectedYear = value
    }
} 

请参阅fiddle

并且避免使用camelCase将事件名称改为使用kebab-case，因为HTML属性不区分大小写并且可能会导致问题