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>
  `
});

这里是我的vue初始化和方法在同一js文件中

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>

vue方法未定义

1 个答案: