From 390def3a9b81c0261b1437f9824f9b88f116b067 Mon Sep 17 00:00:00 2001
From: ewall <1054064180@qq.com>
Date: Mon, 27 Aug 2018 14:19:20 +0800
Subject: [PATCH] 'add'

---
 README.md                  |  2 +-
 src/components/testCom.vue | 39 ++++++++++++++++++++++++++++++++++++++
 src/router/index.js        |  6 ++++++
 src/view/test.vue          | 38 +++++++++++++++++++++++++++++++++++++
 4 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/components/testCom.vue
 create mode 100644 src/view/test.vue

diff --git a/README.md b/README.md
index a89a3eb..6ce5e4f 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-chapter22商品列表页
\ No newline at end of file
+父子组件之间的传值
\ No newline at end of file
diff --git a/src/components/testCom.vue b/src/components/testCom.vue
new file mode 100644
index 0000000..32ffa37
--- /dev/null
+++ b/src/components/testCom.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="testCom">
+    <input type="text" v-model="message" />
+    <button @click="click">Send</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "testCom",
+  data() {
+    return {
+      message: "我是来自子组件的消息"
+    };
+  },
+  created() {},
+  mounted() {},
+  computed: {},
+  methods: {
+    click() {
+      this.$emit("childFn", this.message);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../assets/styles/variables.less";
+.testCom {
+  //background: @bgColor;
+  input {
+    border: 1px solid red;
+  }
+  // button {
+  //   width: 200px;
+  //   height: 100px;
+  // }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index a53cad7..7e2dc99 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import Home from '@/view/home'
 import Classify from '@/view/classify'
 import GoodList from '@/view/goodList'
+import Test from '@/view/test'
 
 Vue.use(Router)
 
@@ -21,5 +22,10 @@ export default new Router({
     path: '/goodList',
     name: 'GoodList',
     component: GoodList
+  },
+  {
+    path: '/test',
+    name: 'Test',
+    component: Test
   }]
 })
diff --git a/src/view/test.vue b/src/view/test.vue
new file mode 100644
index 0000000..5adb796
--- /dev/null
+++ b/src/view/test.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="test">
+        <test-com @childFn="parentFn"></test-com>
+        <br/> 子组件传来的值 : {{message}}
+    </div>
+</template>
+
+<script>
+import TestCom from "@/components/testCom";
+
+export default {
+  name: "test",
+  components: {
+    TestCom
+  },
+  data() {
+    return {
+      message: ""
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  computed: {},
+  methods: {
+    parentFn(payload) {
+      this.message = payload;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../assets/styles/variables.less";
+.test {
+  //background: @bgColor;
+}
+</style>