Vue

by Bob_Chen

HTML

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

    <noninherited-child :id="id" :tmp="tmp" 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>


<template id="child-component2">
  <div >
    <h1 v-on="$listeners">Child</h1>
    <div :id="$attrs.id">
      $attrs -> {{$attrs}}
      $listeners -> {{$listeners}}
    </div>
  </div>
</template>
<script src="https://unpkg.com/vue@2.4"></script>

CSS

body {
  padding: 15px;
}

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

Vue

new Vue({
  el: '#app',
  components: {
    'parent': {
      name: 'parent',
      template: '#parent-component',
      data: function() {
        return {
	        tmp: '123',
          id: 'Hello',
          
        }
      },
      methods: {
        sayHello: function() {
          window.alert('hello123!'+this.tmp)
        }
      },
      components: {
        'inherited-child': {
          name: 'inherited-child',
          template: '#child-component'
        },
        'noninherited-child': {
          inheritAttrs: false,
          name: 'noninherited-child',
          template: '#child-component2'
        }
      }
    }
  }
})