title: Pass Function as Property to Vue Component
body: <p>I am trying to make my Vue Component reusable but there is a part in it which requires to run a function on button click which I have defined in the parent component.
  The component's button will always run a parent function and the parameter it passes is always the same (its only other property).</p>
  
  <p>Right now I am passing 2 properties to the component: 1) an object and 2) the parent function reference, which requires the object from 1) as a parameter.</p>
  
  <p>The <strong>Child</strong>-Component looks like this (stripped unnecessary code):</p>
  
  <pre><code>&lt;button v-on:click="parentMethod(placement)"&gt;Analyze&lt;/button&gt;
  
  Vue.component('reporting-placement', {
      props: ['placement', 'method'],
      template: '#reporting-placement',
      methods: {
          parentMethod: function(placement) {
              this.method(placement);
          }
      }
  });
  </code></pre>
  
  <p>The <strong>parent</strong> is making use of the child like this:</p>
  
  <pre><code>&lt;reporting-placement v-bind:placement="placement" v-bind:method="analyzePlacement"&gt;&lt;/reporting-placement&gt;
  
  methods: {
          analyzePlacement: function(placement) {
              this.active_placement = placement;
          },
      }
  </code></pre>
  
  <p>As you can see, the child has only one property, <code>placement</code>, and the callback reference. The <code>placement</code> must be put in as a parameter to the reference function from the parent.</p>
  
  <p>But since the parent defines the parameters, the child shouldn't concern itself with what it needs to pass to the parent function. Instead I would prefer to already pass the parameter along in the parent.</p>
  
  <p>So instead of </p>
  
  <pre><code>&lt;reporting-placement v-bind:placement="placement" v-bind:method="analyzePlacement"&gt;&lt;/reporting-placement&gt;
  </code></pre>
  
  <p>I would prefer</p>
  
  <pre><code>&lt;reporting-placement v-bind:placement="placement" v-bind:method="analyzePlacement(placement)"&gt;&lt;/reporting-placement&gt;
  </code></pre>
  
  <p>(including appropriate changes in the child).
  But passing the parameter along does not work that way.
  Is it possible (maybe in other syntax) to 'bind' the variable to the function reference so that it is automatically passed along when the callback is called? </p>
  
  <p>Info: I don't get an error message if I write it down as above but the whole Vue screws up when I pass the parameter along to the component.</p>
  
  <p>Hope the issue is clear :-) Thanks a lot!</p>