From e037f010f16d99c1ebdacf2ed4ab542e42c76958 Mon Sep 17 00:00:00 2001
From: Code12121 <3056762376@qq.com>
Date: Wed, 2 Nov 2022 19:22:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=B2=E6=9B=B4=E6=96=B0=E8=87=B3=E7=88=B6?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=AE=BF=E9=97=AE=E5=AD=90=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=88$children/$refs=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../父组件访问子组件$children.html    | 52 +++++++++++++++++++
 .../父组件访问子组件$ref.html         | 44 ++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 10-组件化开发/08-父子组件的访问/父组件访问子组件$children.html
 create mode 100644 10-组件化开发/08-父子组件的访问/父组件访问子组件$ref.html
diff --git a/10-组件化开发/08-父子组件的访问/父组件访问子组件$children.html b/10-组件化开发/08-父子组件的访问/父组件访问子组件$children.html
new file mode 100644
index 0000000..cda794f
--- /dev/null
+++ b/10-组件化开发/08-父子组件的访问/父组件访问子组件$children.html
@@ -0,0 +1,52 @@
+<!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></apps>
+    <button @click="Clickme()">点击我</button>
+  </div>
+  <template id="tpl">
+    <div>
+      <h1>这是子组件</h1>
+    </div>
+  </template>
+</body>
+<script src="../../../JavaScript/vue.js"></script>
+<script>
+  new Vue({
+    el:"#app",
+    methods: {
+      Clickme(){
+        this.$children[0].ChildItems()
+        for (let i =0;i<this.$children[0].list.length;i++){
+          this.$children[0].list[i]=i+2-1/2
+        }
+        console.log(this.$children[0].list);
+      }
+    },
+    components:{
+      'apps':{
+        template:"#tpl",
+        data(){
+          return{
+            list:[0,1,2,3,5,6,7,3,1]
+          }
+        },
+        methods: {
+          ChildItems(){
+            let item=1
+            console.log("这是子组件函数");
+            console.log(this.list);
+          }
+        },
+      }
+    }
+  })
+</script>
+</html>
\ No newline at end of file
diff --git a/10-组件化开发/08-父子组件的访问/父组件访问子组件$ref.html b/10-组件化开发/08-父子组件的访问/父组件访问子组件$ref.html
new file mode 100644
index 0000000..3d2f030
--- /dev/null
+++ b/10-组件化开发/08-父子组件的访问/父组件访问子组件$ref.html
@@ -0,0 +1,44 @@
+<!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 ref="first"></apps>
+    <button @click="refClick()">点击我</button>
+  </div>
+  <template id="tpl">
+    <div>
+      <h1>{{content}}</h1>
+    </div>
+  </template>
+</body>
+<script src="../../../JavaScript/vue.js"></script>
+<script>
+  new Vue({
+    el:"#app",
+    methods: {
+      refClick(){
+        console.log(this.$refs.first.content);
+        this.$refs.first.content="这是被修改后的内容"
+        console.log(this.$refs.first.content);
+      }
+    },
+    components:{
+      'apps':{
+        template:"#tpl",
+        data(){
+          return{
+            content:"这是内容",
+            list:["这是第一条", "这是第二条", "这是第三条"]
+          }
+        }
+      }
+    }
+  })
+</script>
+</html>
\ No newline at end of file
