Explorar el Código

update 测试例子

15724580513 hace 4 años
padre
commit
abcf10b250
Se han modificado 2 ficheros con 66 adiciones y 6 borrados
  1. 21 0
      components/test/myChildPage.vue
  2. 45 6
      pages/test/index.vue

+ 21 - 0
components/test/myChildPage.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    {{testData.count}}
+  </div>
+</template>
+
+<script>
+  export default {
+    name:   'myChildPage',
+    inject: {
+      testData: {
+        default: () => {
+        },
+      },
+    },
+  };
+</script>
+
+<style scoped>
+
+</style>

+ 45 - 6
pages/test/index.vue

@@ -1,13 +1,52 @@
 <template>
-    <div>
-      test
-    </div>
+  <div>
+    {{counter}}
+    <hr>
+    <el-button @click="addFun">add</el-button>
+    <el-button @click="minFun">min</el-button>
+
+    <myChildPage></myChildPage>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: 'test',
-    };
+  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>