<template>
  <div>
    {{counter}}
    <hr>
    <el-button @click="addFun">add</el-button>
    <el-button @click="minFun">min</el-button>

    <myChildPage></myChildPage>
  </div>
</template>

<script>
  import myChildPage from '~/components/test/myChildPage';
  import Vue         from 'vue';

  const myData = Vue.observable({ count: 1 });
  export default {
    name:       'test',
    provide:    {
      testData: myData,
    },
    components: {
      myChildPage,
    },
    head() {
      return {
        title: '测试',
        meta:  [
          {
            hid:     'description',
            name:    'description',
            content: '我的测试',
          },
        ],
      };
    },
    computed:   {
      counter() {
        return myData.count;
      },
    },
    methods:    {
      addFun() {
        myData.count++;
      },
      minFun() {
        myData.count--;
      },
    },
  };
</script>

<style scoped>

</style>
