changes

2022-11-03 11:20:44 +08:00 · 2022-11-03 11:20:44 +08:00 · 7fcb9b872d
parent 9f70cf99ad
commit 7fcb9b872d
2 changed files with 98 additions and 0 deletions
--- a/10-组件化开发/08-父子组件的访问/子组件访问父-根组件($parent-$root)/子组件访问根组件$root.html
+++ b/10-组件化开发/08-父子组件的访问/子组件访问父-根组件($parent-$root)/子组件访问根组件$root.html
@ -0,0 +1,58 @@
+<!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>
+  </div>
+  <template id="tpl">
+    <div>
+      <h1>{{content}}</h1>
+      <h2>这是调用的内容：</h2>
+      <p v-for="items in root">{{items}}</p>
+      <button @click="btn()">调用根内容</button>
+    </div>
+  </template>
+</body>
+<script src="../../../JavaScript/vue.js"></script>
+<script>
+  new Vue({
+    el:"#app",
+    data:{
+      item: [
+        { id: 871, name: "《西游记》", author: "吴承恩", num: 0 },
+        { id: 652, name: "《红楼梦》", author: "曹雪芹", num: 0 },
+        { id: 123, name: "《巴黎圣母院》", author: "雨果", num: 0 },
+        { id: 014, name: "《悲惨世界》", author: "雨果", num: 0 },
+        { id: 025, name: "《UNIX编程艺术》", author: "Eric S. Raymond", num: 0 },
+        { id: 036, name: "《计算机导论》", author: "王志强", num: 0 },
+        { id: 017, name: "《战争与和平》", author: "列夫·托尔斯泰", num: 0 },
+        { id: 022, name: "《三国演义》", author: "罗贯中", num: 0 },
+      ]
+    },
+    components:{
+      'apps':{
+        template:"#tpl",
+        data(){
+          return {
+            content:"这是子组件",
+            root:[]
+          }
+        },
+        methods: {
+          btn(){
+            for(let item of this.$root.item){
+              this.root.push(item.name)
+            }
+          }
+        },
+      }
+    }
+  })
+</script>
+</html>
--- a/10-组件化开发/08-父子组件的访问/子组件访问父-根组件($parent-$root)/子组件访问父组件$parents.html
+++ b/10-组件化开发/08-父子组件的访问/子组件访问父-根组件($parent-$root)/子组件访问父组件$parents.html
@ -0,0 +1,40 @@
+<!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">
+    {{content}}
+    <apps></apps>
+  </div>
+  <template id="tpl">
+    <div>
+      <button @click="btn()">按钮</button>
+    </div>
+  </template>
+</body>
+<script src="../../../JavaScript/vue.js"></script>
+<script>
+  new Vue({
+    el:"#app",
+    data: {
+      content:"这是一个消息",
+      list: ['这是内容1', "这是内容2", "这是内容3"]
+    },
+    components:{
+      'apps':{
+        template:"#tpl",
+        methods: {
+          btn(){
+            this.$parent.content="这个消息来自子组件的操作"
+          }
+        },
+      }
+    }
+  })
+</script>
+</html>