<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'
}
})
This Pen doesn't use any external CSS resources.