Question

对Vue.js来说很新，我遇到了将子事件处理程序传递给其直接父级的问题。我有一个滑块，我想将其值传递给它的父组件。当我运行我的代码时，我将'child'打印到控制台而不是'parent'，因此它显然没有正确收听。

new Vue({
  el: '#price-filter-container',
  data() {
    return {
      value: [0, Products.maxPrice],
      min: 0,
      max: Products.maxPrice,
      products: [Products.products]
    }
  },
  methods: {
    sliderChange: function(data) {
      console.log("parent")
    }
  }
});

Vue.component('price-filter', {
      props: ['value', 'min', 'max', 'products'],
      template: '<vue-slider v-on:click.native="childSliderChange" v-model="value" :min="min" :max="max"></vue-slider>',
      methods: {
        childSliderChange: function() {
          console.log("child");
          this.$emit('childSliderChange');
        }
      },
    });

<div id="app" style="margin-top:20px;width:1000px">
  <div id="price-filter-container" style="width:300px;margin:50px auto;">
    <price-filter v-on:childSliderChange="sliderChange" :products="products" :max="max" :min="min" :value="value"></price-filter>
  </div>

</div>

我完全难过了。为什么这不起作用？为什么'父母'没有打印到控制台？

Answer 1

我建议完全避免使用驼峰式事件。发出一个烤肉串的事件，并添加一个烤肉串案件处理程序。

this.$emit('child-slider-change')

和

<price-filter v-on:child-slider-change="sliderChange" :products="products" :max="max" :min="min" :value="value"></price-filter>

这是一个基本的例子。

＆＃13;

console.clear()

Vue.component("emitter",{
  template:`<h1>I'm the emitter</h1>`,
  mounted(){
    setTimeout(() => this.$emit('child-slider-change'), 500)
  }
})


new Vue({
  el:"#app",
  data:{
    caught: null
  }
})

＆＃13;

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <emitter @child-slider-change="caught = 'Caught the event'"></emitter>
  {{caught}}
</div>

＆＃13;

Vue.js - $发送子事件处理程序未被父级侦听器拾取

1 个答案: