admin

12_vuecli/myapp/src/components/TestComp1.vue

@@ -3,13 +3,20 @@
         <h1>自定义组件一</h1>
         {{str}}
         <h1>{{compName}}</h1>
+        <button @click="passVal">button</button>
     </div>
 </template>
 <script>
 export default {
     data() {
         return {
-            compName: 'comp1'
+            compName: 'comp1',
+            comVal:10
+        }
+    },
+    methods: {
+        passVal(){
+            this.$emit('parentHandle',this.comVal);
         }
     },
     // props:['str'],

12_vuecli/myapp/src/views/TestComp.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="test-comp">
         <h1>组件测试页面</h1>
-        <TestComp1 str="hello world!"></TestComp1>
+        <TestComp1 str="hello world!" @parentHandle="getVal"></TestComp1>
         <!-- <TestComp1 v-bind:str="str1"></TestComp1> -->
-        <TestComp1></TestComp1>
+        <!-- <TestComp1></TestComp1> -->
     </div>
 </template>
 
@@ -28,6 +28,11 @@ export default {
         console.log(to, from, next)
         next()
     },
+    methods: {
+        getVal(val){
+            console.log("父组件接收子组件传来的值"+val);
+        }
+    },
     components:{
         TestComp1
     }