vue里面数据

<template>
  <div>
  <BaseCountItem></BaseCountItem>
  <br>
  <BaseCountItem></BaseCountItem>
  <br>
  <BaseCountItem></BaseCountItem>
</div>
</template>

<script>
import BaseCountItem from './components/BaseCountItem.vue';
export default {
  components:{
    BaseCountItem
  }
}
</script>

<style>

</style>

App.vue里面的代码

<template>
  <div class="BaseCount">
    <div id="von">
    <button @click="number--">--</button>
    <span>{{number}}</span>
    <button v-on:click="number++">++</button>
  </div>
  </div>
</template>

<script>
export default {
    data(){
        return{number:9}
    },
    methods:{

    }
}
</script>

<style>

</style>

BaseCountItem.vue

在vue里面，数据data必须为函数，这样是为了更好的监听每一个组件的值