метод vue не определен

Question

вот некоторые проблемы с методами, к которым мой компонент не может получить доступ к методам.Могу ли я передать такие методы, как prop, в компонент?

вот мой HTML:

<guests v-bind="guests"></guests>

вот компонент в моем файле js

var guestsComponent = Vue.component("guests", {
  props: ['adultCount', 'childCount'],
  template: `
    <div class="guests-total">
      <div>
      <a @click="decrementAdult"></a>
      <a @click="incrementAdult"></a>
      <input type="text" placeholder="adults"/> {{adultCount}}
      </div>
    </div>
  `
});

и здесь, втот же файл js, мой vue init и методы

var app = new Vue({
  el: "#search",
  components: {
    "guests": guestsComponent
  },
  data() {
    return {
      guests: {
        adultCount: 0,
        childCount: 0
      }
    };
  },
  methods: {
    decrementAdult() {
      this.guests.adultCount++
    },
    incrementAdult() {
      this.guests.adultCount--
    }
  }
});

Я могу получить доступ к данным без проблем, когда использую реквизиты, но я не знаю, как я могу передавать такие методы, как реквизиты, или это необходимо?

вот ошибка на консоли:

ReferenceError: decrementAdult is not defined
    at o.eval (eval at xa (vue.min.js:NaN), <anonymous>:3:88)
    at o.fn._render (vue.min.js?f6b5:6)
    at o.eval (vue.min.js?f6b5:6)
    at St.get (vue.min.js?f6b5:6)
    at new St (vue.min.js?f6b5:6)
    at o.hn.$mount (vue.min.js?f6b5:6)
    at o.hn.$mount (vue.min.js?f6b5:6)
    at init (vue.min.js?f6b5:6)
    at eval (vue.min.js?f6b5:6)
    at b (vue.min.js?f6b5:6)

Answer 1

Поскольку события click выполняются в дочернем компоненте guests, вы должны передать событие родительскому компоненту и обработать его там следующим образом:

    ....
    <a @click="$emit('decrement-adult')"></a>
     ...

в родительском компоненте do:

   <guests v-bind="guests" @decrement-adult="decrementAdult"></guests>