<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.1.4</p>
<h3 dir="auto">Reproduction Link</h3>


<p dir="auto"><a href="https://jsfiddle.net/JounQin/s5b79kqc/" rel="nofollow">https://jsfiddle.net/JounQin/s5b79kqc/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Just look at the output HTML</p>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">Child comp should has className <code class="notranslate">abc def</code></p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The className is <code class="notranslate">abc abc def</code></p>
<p dir="auto">Is that by design?</p>
<p dir="auto">I understand that it's possible to communicate between parent and child components via events but it would be very convenient if vue.js supported what I'm calling <em>callback attributes</em>.  This would allow you to write HTML something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;parent-component&gt;
  &lt;child-component on-callback=&quot;doSomething&quot;&gt;
  &lt;/child-component&gt;
&lt;/parent-component&gt;"><pre class="notranslate"><code class="notranslate">&lt;parent-component&gt;
  &lt;child-component on-callback="doSomething"&gt;
  &lt;/child-component&gt;
&lt;/parent-component&gt;
</code></pre></div>
<p dir="auto">With Javascript code like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var parent = {
  methods: {
    doSomething: function (args) {
      // Do something
    }
  }
}

var child = {
  cbAttributes: ['on-callback'],

  ready: function () {
    this.onCallback(/* Args */);
  }
}

$(function () {
  new Vue({
    el: 'body',

    components: {
      'parent-component': parent,
      'child-component': child,
    }
  }
})"><pre class="notranslate"><code class="notranslate">var parent = {
  methods: {
    doSomething: function (args) {
      // Do something
    }
  }
}

var child = {
  cbAttributes: ['on-callback'],

  ready: function () {
    this.onCallback(/* Args */);
  }
}

$(function () {
  new Vue({
    el: 'body',

    components: {
      'parent-component': parent,
      'child-component': child,
    }
  }
})
</code></pre></div>
<p dir="auto">Currently, I can fake this using <code class="notranslate">paramAttributes</code> by passing the function name as a string and then calling the function from the child like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="this.$parent[this.onCallback](/* args */);"><pre class="notranslate"><code class="notranslate">this.$parent[this.onCallback](/* args */);
</code></pre></div>
<p dir="auto">but it would be much nicer if this was explicitly supported.</p>
<p dir="auto">I've tried passing callbacks as <code class="notranslate">paramAttributes</code> like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;parent-component&gt;
  &lt;child-component on-callback=&quot;{{doSomething}}&quot;&gt;
  &lt;/child-component&gt;
&lt;/parent-component&gt;"><pre class="notranslate"><code class="notranslate">&lt;parent-component&gt;
  &lt;child-component on-callback="{{doSomething}}"&gt;
  &lt;/child-component&gt;
&lt;/parent-component&gt;
</code></pre></div>
<p dir="auto">but it does not seem to work.</p>
<p dir="auto">Also, I want to point out that this does not couple the parent and child.</p>
<p dir="auto">I searched for similar issues but did not find one.  I apologize in advance if this is a duplicate.</p>