完成网页代码,分别定义全局组件(名称是button-counter)和局部组件(名称是child,属性是props:[ msg , item , signal ])

全局组件的定义可以放在Vue实例化之前，如下：

<template>
  <div id="app">
    <button-counter></button-counter>
  </div>
</template>

<script>
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});

new Vue({
  el: '#app'
})
</script>

而局部组件可以在Vue实例中定义，如下：

<template>
  <div>
    <child :msg="message" :item="item" :signal="true"></child>
  </div>
</template>

<script>
Vue.component('child', {
  props: ['msg', 'item', 'signal'],
  template: '<div>{{ msg }}, {{ item }}, {{ signal }}</div>'
});

new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    item: 'world'
  }
})
</script>

以上代码中，`button-counter`是全局组件，`child`是局部组件，`child`的属性有`msg`、`item`和`signal`，分别在父组件中绑定了相应的值。