admkin

10-vuecli/vueapp/myapp/src/App.vue

@@ -6,6 +6,16 @@
     <HelloWorld msg="Welcome to Your Vue.js App"/>
     <!-- 第三步 使用MyPage组件 -->
      <MyPage/>
+    <div class="page-two">
+      <!-- 父组件向子组件穿参 在组件上写一个自定义属性名等于你要传递的变量  -->
+        <MyPageTwo str="hello" v-bind:val="myName"/>
+    </div>
+    <div class="page-three">
+      <!-- 子组件向父组件传递参数 -->
+       <!-- 子组件向父组件传递参数 通过 自定义事件 -->
+        <!-- 这里的getVal 是自定义事件的名称 自己起的名字 -->
+      <MyPageThree @getVal="conVal"/>
+    </div>
   </div>
 </template>
 
@@ -16,13 +26,29 @@ import HelloWorld from './components/HelloWorld.vue'
 
 // 第一步 引入MyPage组件
 import MyPage from "./components/MyPage.vue"
+
+import MyPageTwo from "./components/MyPageTwo.vue"
+
+import MyPageThree from "./components/MyPageThree.vue"
 // export default 用于导出js文件内容或当前模块的内容
 export default {
   name: 'App',
+  data(){
+    return{
+      myName:"app"
+    }
+  },
+  methods:{
+    conVal(val){
+      console.log("父组件接收到子组件传递过来的值",val);
+    }
+  },
   components: {
     HelloWorld,
     // 第二步 注册MyPage组件
-    MyPage
+    MyPage,
+    MyPageTwo,
+    MyPageThree
   }
 }
 </script>
@@ -36,4 +62,20 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+.page-two{
+  position: fixed;
+  top: 100px;
+  right: 100px;
+  width: 400px;
+  height: 400px;
+  border:3px solid black
+}
+.page-three{
+  position: fixed;
+  top:100px;
+  left: 100px;
+  width: 400px;
+  height: 400px;
+  border:3px solid black;
+}
 </style>

10-vuecli/vueapp/myapp/src/components/MyPageThree.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="my-page-three">
+        <h1 class="title">如何实现子组件给父组件传递参数</h1>
+        <button @click="passVal">传递</button>
+    </div>
+</template>
+<script>
+    export default {
+        name: "MyPageThree",
+        data(){
+            return{
+                num:8
+            }
+        },
+        methods:{
+            passVal(){
+                // this.$emit() 这个方法是用来触发自定义事件的
+                // 这里有两个参数 第一个参数是自定义事件的名称 第二个是要传递的参数
+                this.$emit("getVal" , this.num);
+            }
+        }
+    }
+</script>

10-vuecli/vueapp/myapp/src/components/MyPageTwo.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="my-page-two">
+        <h1 class="title">如何实现父组件给子组件传递参数</h1>
+        <!-- 使用父组件传递过来的参数 -->
+        <h1>我是 {{ val }} 子组件</h1>
+        <h1>父组件传递过来的值是:{{ str }}</h1>
+    </div>
+</template>
+<script>
+    export default {
+        name: "MyPageTwo",
+        data(){
+            return{
+                str1:"hello"
+            }
+        },
+        // 父组件传递过来的参数不能于data中定义的变量同名
+        props:["val","str"], // 声明接收父组件传递过来的参数
+    }
+</script>
+<!-- scoped 可以控制样式私有化 隔离样式 保障css仅能控制当前页面 -->
+<style scoped>
+    .title{
+        font-weight: bold;
+        color: orange;
+    }
+</style>