'add'

README.md

@@ -1 +1 @@
-chapter22商品列表页
+父子组件之间的传值

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>

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
   }]
 })

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>