父子组件的练习

src/router/index.js

@@ -7,7 +7,11 @@ export const constantRoutes = [
     {
         path: '/',
         name: 'home',
-        component: () => import('@/components/HelloWorld.vue')
+        component: () => import('@/components/HelloWorld')
+    }, {
+        path: '/work',
+        name: 'work',
+        component: () => import('@/views/work/work')
     }
 ]
 

src/views/work/child.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="child">
+    <el-tag>我是子组件</el-tag>
+    <el-tag>{{val}}</el-tag>
+    <el-button type="primary" @click="ChildByVal">调用父类方法</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "child",
+  props: {
+    val: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    ChildByVal: function() {
+      this.$emit("childByValue", "ChildByVal");
+    }
+  }
+};
+</script>

src/views/work/work.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="work">
+    <el-button type="primary" @click="vIfCommand">v-if 开关</el-button>
+    <el-tag v-if="vif">vIf效果演示</el-tag>
+    <br />
+    <el-input v-model="input" placeholder="请输入内容" />
+    <el-tag>{{input}}</el-tag>
+    <child :val="val" @childByValue="childByValue" />
+  </div>
+</template>
+
+<script>
+import child from "@/views/work/child";
+
+export default {
+  name: "work",
+  components: {
+    child
+  },
+  data() {
+    return {
+      vif: false,
+      input: "",
+      val: "子组件默认内容"
+    };
+  },
+  methods: {
+    vIfCommand: function() {
+      this.vif = !this.vif;
+    },
+    childByValue: function(chi) {
+      console.log("bb");
+      this.val = chi;
+      this.input = chi;
+    }
+  }
+};
+</script>