javascript - single - vue.component example

Vue.js pasa la función como prop y hace que el niño la llame con datos

Question

Tengo un componente de lista de publicaciones y un componente de publicación.

Paso un método para llamar desde la lista de publicaciones al componente de publicación, de modo que cuando se haga clic en un botón, se llamará.

Pero quiero pasar el ID de publicación cuando se hace clic en esta función

Código:

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

Como puede ver en el componente Post, tiene un clic que ejecuta un método que obtuvo de un puntal, quiero agregar una variable a ese método.

¿Cómo haces eso?

Answer 1

Normalmente, el controlador de eventos de click recibirá el evento como su primer argumento, pero puede usar el bind para indicar a la función qué usar para this y sus primeros argumentos:

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

Respuesta actualizada : Sin embargo, podría ser más sencillo (y es más estándar de Vue) que el niño emit un evento y que el padre lo maneje.

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

Usando Vue 2 y expandiendo el código de @Roy J anterior, creé un método en el componente secundario (Post) que llama a la función prop y envía un objeto de datos como parte de la devolución de llamada. También pasé la publicación como prop y utilicé su valor de ID en la devolución de llamada.

De vuelta en el componente de Publicaciones (principal), modifiqué la función en la que hice clic haciendo referencia al evento y obteniendo la propiedad de ID de esa manera.

Echa un vistazo a el violín de trabajo aquí

Y este es el código:

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

Y este es el HTML.

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