From ccc00f03fd2a171ff167525a7e10c5b030155eb5 Mon Sep 17 00:00:00 2001
From: Code12121 <3056762376@qq.com>
Date: Thu, 27 Oct 2022 11:26:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=B2=E6=9B=B4=E6=96=B0=E8=87=B3=E5=AD=90?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=90=91=E7=88=B6=E7=BB=84=E4=BB=B6=E4=BC=A0?=
 =?UTF-8?q?=E9=80=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../props属性的使用.html                 |  9 ++-
 ...��习Props属性的使用（对象）.html | 61 +++++++++++++++++++
 .../子组件向父组件传递数据.html    | 53 ++++++++++++++++
 3 files changed, 120 insertions(+), 3 deletions(-)
 create mode 100644 10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/复习Props属性的使用（对象）.html
 create mode 100644 10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/子组件向父组件传递数据.html
diff --git a/10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/props属性的使用.html b/10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/props属性的使用.html
index 48ead21..77b9220 100644
--- a/10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/props属性的使用.html
+++ b/10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/props属性的使用.html
@@ -8,13 +8,16 @@
 </head>
 <body>
   <div id="app">
-    <apps :new_lists="list">
+    <apps :new_-lists="list">
+      <!-- 
+        v-bind标签是不支持驼峰标识，因此在v-bind中如果要是使用驼峰标识就必须使用-进行连接转译
+      -->
     </apps>
   </div>
 </body>
 <template id="tpl">
   <div>
-    <h1>{{new_lists}}</h1>
+    <h1>{{new_Lists}}</h1>
   </div>
 </template>
 <script src="../../../JavaScript/vue.js"></script>
@@ -29,7 +32,7 @@
         template:"#tpl",
         // 1、props:['new_lists']
         props:{
-          new_lists:{
+          new_Lists:{
             type:Array,
             default(){
               return ['None']
diff --git a/10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/复习Props属性的使用（对象）.html b/10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/复习Props属性的使用（对象）.html
new file mode 100644
index 0000000..1589fab
--- /dev/null
+++ b/10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/复习Props属性的使用（对象）.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app">
+    <apps :tpl="list" ></apps>
+  </div>
+  <template id="tpl">
+    <div>
+      <h1 v-for="item in tpl">{{item.name}}</h1>
+    </div>
+  </template>
+</body>
+<script src="../../../JavaScript/vue.js"></script>
+<script>
+  const vue=new Vue({
+    el:"#app",
+    data:{
+      list:{
+        201:{
+          name:"张华",
+          age:"20",
+          glass:"2-1",
+          info:"none"
+        },
+        202: {
+          name: "张立勇",
+          age: "21",
+          glass: "2-2",
+          info: "无"
+        },
+        203: {
+          name: "张五十",
+          age: "27",
+          glass: "2-6",
+          info: "none"
+        }
+        
+      }
+    },
+    components:{
+      'apps':{
+        template:"#tpl",
+        props:{
+          tpl:{
+            type:Object,
+            default(){
+              return {}
+            }
+          }
+        }
+      }
+    }
+  })
+</script>
+</html>
\ No newline at end of file
diff --git a/10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/子组件向父组件传递数据.html b/10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/子组件向父组件传递数据.html
new file mode 100644
index 0000000..5bf4ec2
--- /dev/null
+++ b/10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/子组件向父组件传递数据.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <!-- 父组件 -->
+  <div id="app">
+    <apps @emititem="ClickOn"></apps>
+    <!-- 在自定义事件中默认不写就是传递值，在dom中方法默认不写就是传递event对象 -->
+  </div>
+  <template id="tpl">
+    <div>
+      <button v-for="item in list" @click="ClickSubmit(item)">{{item.content}}</button>
+    </div>
+  </template>
+</body>
+<script src="../../../JavaScript/vue.js"></script>
+<script>
+  const vue=new Vue({
+    el:"#app",
+    methods:{
+      ClickOn(item){
+        alert(item.id+item.content)
+      }
+    },
+    components:{
+      'apps':{
+        template:"#tpl",
+        data(){
+          return {
+            list:[
+              { id: 721, content: "热门推荐" },
+              { id: 223, content: "手机数码" },
+              { id: 653, content: "家用电器" },
+              { id: 324, content: "电脑办公" },
+              //"热门推荐",'手机数码','家用电器','电脑办公'
+            ]//注意格式：子组件中如果要返回任意内容，那么就必须创建一个data对象返回内容
+          }
+        },
+        methods: {
+          ClickSubmit(item){
+            this.$emit('emititem',item)//发射一个事件给父组件
+          }
+        },
+      }
+    }
+  })
+</script>
+</html>
\ No newline at end of file
