javascript - Vue.js 将函数作为 prop 传递并让 child 用数据调用它

Question

我有一个帖子列表组件和一个帖子组件。

我传递了一个从帖子列表调用的方法到帖子组件，所以当一个按钮被点击时它会被调用。

但是我想在点击这个功能的时候传递post id

代码:

let PostsFeed = Vue.extend({
    data: function () {
        return {
          posts: [....]
        }
    },
    template: `
      <div>
        <post v-for="post in posts" :clicked="clicked" />
      </div>
    `,
    methods: {
      clicked: function(id) {
        alert(id);
      }
    }
  }
                           
  let Post = Vue.extend({
    props: ['clicked'],
    data: function () {
        return {}
    },
    template: `
      <div>
        <button @click="clicked" />
      </div>
    `
}

正如您在 Post 组件中看到的那样，您有一个点击运行他从 prop 获得的方法，我想向该方法添加一个变量。

你是怎么做到的？

Answer 1

通常，click 事件处理程序将接收该事件作为其第一个参数，但您可以使用 bind告诉函数将什么用于它的 this 和第一个参数:

:clicked="clicked.bind(null, post)

更新后的答案:但是，让 child emit 可能更直接(并且更符合 Vue 标准)一个事件并让父级处理它。

let Post = Vue.extend({
  template: `
      <div>
        <button @click="clicked">Click me</button>
      </div>
    `,
  methods: {
    clicked() {
      this.$emit('clicked');
    }
  }
});

let PostsFeed = Vue.extend({
  data: function() {
    return {
      posts: [1, 2, 3]
    }
  },
  template: `
      <div>
        <post v-for="post in posts" @clicked="clicked(post)" />
      </div>
    `,
  methods: {
    clicked(id) {
      alert(id);
    }
  },
  components: {
    post: Post
  }
});

new Vue({
  el: 'body',
  components: {
    'post-feed': PostsFeed
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<post-feed></post-feed>