Vue.js 2.4 : inheritAttrs, $attrs, $listeners

2.3에서 같은 예제는 https://jsfiddle.net/changjoo_park/dd35efbs/

by Renoir Boulanger

HTML

<div id="app">
  <parent></parent>
</div>
<template id="parent-component">
  <div>
    <h1>Parent</h1>
    <inherited-child :id="id" v-bind="$attrs" @click="sayHello"></inherited-child>
    <component :is="inheritedChildComponent" :id="id" v-bind="$attrs" @click="sayHello"></component>

    <noninherited-child :id="id" v-bind="$attrs" @click="sayHello"></noninherited-child>
  </div>
</template>

<template id="child-component">
  <div v-on="$listeners">
    <h1>Child</h1>
    <div>
      $attrs -> {{$attrs}}
    </div>
  </div>
</template>
<script src="https://unpkg.com/[email protected]"></script>

CSS

#Hello {
  color: white;
  background-color: tomato;
  border-radius: 10px;
  padding: 10px;
}

JavaScript

new Vue({
  el: '#app',
  data() {
  	const inheritedChildComponent = {template: '#child-component'}
  	return {
	    inheritedChildComponent
    }	
  },
  components: {
    'parent': {
      name: 'parent',
      template: '#parent-component',
      data: function() {
        return {
          id: 'Hello'
        }
      },
      methods: {
        sayHello: function() {
          window.alert('hello!')
        }
      },
      components: {
        'inherited-child': {
          name: 'inherited-child',
          template: '#child-component'
        },
        'noninherited-child': {
          inheritAttrs: false,
          name: 'noninherited-child',
          template: '#child-component'
        }
      }
    }
  }
})