未定义Vue.js方法

Question

下面是方法的一些问题，我的组件无法访问方法。我可以把像螺旋桨这样的方法传递给组件吗？

这是我的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>
     ...

在父组件中做：

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

Answer 2

我在下面的代码部分中遇到了类似的'method1' is not defined错误：

methods: {
    method1(){
      console.log("running method1()");
    },
    method2(){
      method1();
    },
    ...

问题是，对method1()的引用应该包括this关键字，如下所示：

export default {
  name: 'TuringMachine',
  props: {
    msg: String,
  },
  data() {
  },
  methods: {
    method1(){
      console.log("running method1()");
    },
    method2(){
      this.method1();
    }
  }
}

希望这对任何有同样问题的人都有帮助。