<div id="app">
  <button-counter></button-counter>
</div>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  inject: ['foo'],
  methods: {
    handleClick: function () {
      alert(this.foo)
    }
  },
  template: '<button v-on:click="handleClick">You clicked me</button>'
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  provide: {
    foo: 'bar'
  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js