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

Question

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

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.

How do you do that?

Answer 1

Normally, the click event handler will receive the event as its first argument, but you can use bind to tell the function what to use for its this and first argument(s):

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

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

 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>

Answer 2

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.

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

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

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

Answer 3

this is the service:

export const getBuilding = () => {
  console.log("service");
  return 0;
};

in the parent component:

<Update-Theme :method="parentMethod"/>

import { getBuilding } from "./service";
methods: {
    parentMethod() {
      console.log("Parent");
      getBuilding();
    },
}

and in the child component

<v-btn color="green darken-1" text @click="closeDialog()">
props: [ "method"],
 methods: {
    closeDialog() {
      this.method();
      //this.$emit("update:dialog", false);
    },
}