Javascript Vue.js 将函数作为道具传递并让孩子用数据调用它

Vue.js pass function as prop and make child call it with data

提问by Tzook Bar Noy

I have a posts list component and a post component.

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

I pass a method to call from the posts list to the post component, so when a button is click it will be called.

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

But I want to pass the post id when this function is clicked

但是我想在单击此功能时传递帖子 ID

Code:

代码：

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

as you can see in Post component you have a click that runs a method he got from a prop, I want to add a variable to that method.

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

How do you do that?

你是怎样做的？

采纳答案by Roy J

Normally, the clickevent handler will receive the event as its first argument, but you can use bindto tell the function what to use for its thisand first argument(s):

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

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

Updated answer: However, it might be more straightforward (and it is more Vue-standard) to have the child emitan event and have the parent handle it.

更新的答案：但是，让子级发出事件并让父级处理它可能更直接（并且更符合 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>

回答by Haret

Using Vue 2 and expanding on @Roy J's code above, I created a method in the child component (Post) that calls the prop function and sends back a data object as part of the callback. I also passed in the post as a prop and used its ID value in the callback.

使用 Vue 2 并扩展上面@Roy J 的代码，我在子组件 (Post) 中创建了一个方法，该方法调用 prop 函数并将数据对象作为回调的一部分发回。我还将帖子作为道具传递并在回调中使用其 ID 值。

Back in the Posts component (parent), I modified the clickedfunction by referencing the event and getting the ID property that way.

回到 Posts 组件（父组件），我通过引用事件并以这种方式获取 ID 属性来修改clicked函数。

Check out the working Fiddle here

在这里查看工作中的小提琴

And this is the code:

这是代码：

let Post = Vue.extend({
  props: {
    onClicked: Function,
    post: Object
  },
  template: `
      <div>
        <button @click="clicked">Click me</button>
      </div>
    `,
  methods: {
    clicked() {
        this.onClicked({
        id: this.post.id
      });
    }
  }
});

let PostsFeed = Vue.extend({
  data: function() {
    return {
      posts: [
        {id: 1, title: 'Roadtrip', content: 'Awesome content goes here'},
        {id: 2, title: 'Cool post', content: 'Awesome content goes here'},
        {id: 3, title: 'Motorcycle', content: 'Awesome content goes here'},
      ]
    }
  },
  template: `
      <div>
        <post v-for="post in posts" :post="post" :onClicked="clicked" />
      </div>
    `,
  methods: {
    clicked(event) {
      alert(event.id);
    }
  },
  components: {
    post: Post
  }
});

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

And this is the HTML

这是 HTML

<div id="app">
    <post-feed></post-feed>
</div>