Teleport

20_脚手架/vue3_test/20.src_Teleport/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div className="app">
+    <h3>我是app组件</h3>
+    <child/>
+  </div>
+</template>
+
+<script>
+import child from "@/components/Child";
+import {reactive, toRefs, provide} from "vue";
+
+export default {
+  name: 'App',
+  components: {child},
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 10px;
+}
+</style>

20_脚手架/vue3_test/20.src_Teleport/components/Child.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="child">
+    <h3>我是child组件</h3>
+    <son/>
+  </div>
+</template>
+
+<script>
+import son from "@/components/Son";
+export default {
+  name: "Child",
+  components:{son}
+}
+</script>
+
+<style>
+  .child{
+    background-color: skyblue;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/20.src_Teleport/components/Dialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <button @click="isShow=true">点我弹个窗</button>
+    <teleport to="body">
+      <div v-if="isShow" class="mask">
+        <div class="dialog">
+          <h3>这是一个弹窗</h3>
+          <h4>内容</h4>
+          <h4>内容</h4>
+          <h4>内容</h4>
+          <button @click="isShow=false">关闭弹窗</button>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script>
+import {ref} from "vue";
+
+export default {
+  name: "Dialog",
+  setup() {
+    let isShow = ref(false)
+    return {isShow}
+  }
+}
+</script>
+
+<style>
+.mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.dialog {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  height: 300px;
+  background-color: green;
+}
+</style>

20_脚手架/vue3_test/20.src_Teleport/components/Son.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="son">
+    <h3>我是son组件</h3>
+    <Dialog/>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog.vue";
+
+export default {
+  name: "Son",
+  components:{Dialog}
+ }
+</script>
+
+<style>
+  .son{
+    background-color: orange;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/20.src_Teleport/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/App.vue

@@ -1,29 +1,17 @@
 <template>
-  <div class="app">
+  <div className="app">
-    <h3>我是app组件（祖）</h3>
+    <h3>我是app组件</h3>
+    <child/>
   </div>
 </template>
 
 <script>
-import {reactive, ref, toRefs, provide, readonly, isReactive, isRef, isReadonly, isProxy} from "vue";
+import child from "@/components/Child";
+import {reactive, toRefs, provide} from "vue";
 
 export default {
   name: 'App',
-  setup() {
+  components: {child},
-    let car = reactive({
-      name:'奔驰',
-      price: '40W'
-    })
-    let car2 = readonly(car)
-    let sum = ref(0)
-
-    console.log(isRef(sum))
-    console.log(isReactive(car))
-    console.log(isReadonly(car2))
-    console.log(isProxy(car))
-
-    return {...toRefs(car)}
-  }
 }
 </script>
 

20_脚手架/vue3_test/src/components/Child.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="child">
+    <h3>我是child组件</h3>
+    <son/>
+  </div>
+</template>
+
+<script>
+import son from "@/components/Son";
+export default {
+  name: "Child",
+  components:{son}
+}
+</script>
+
+<style>
+  .child{
+    background-color: skyblue;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/src/components/Dialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <button @click="isShow=true">点我弹个窗</button>
+    <teleport to="body">
+      <div v-if="isShow" class="mask">
+        <div class="dialog">
+          <h3>这是一个弹窗</h3>
+          <h4>内容</h4>
+          <h4>内容</h4>
+          <h4>内容</h4>
+          <button @click="isShow=false">关闭弹窗</button>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script>
+import {ref} from "vue";
+
+export default {
+  name: "Dialog",
+  setup() {
+    let isShow = ref(false)
+    return {isShow}
+  }
+}
+</script>
+
+<style>
+.mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.dialog {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  height: 300px;
+  background-color: green;
+}
+</style>

20_脚手架/vue3_test/src/components/Son.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="son">
+    <h3>我是son组件</h3>
+    <Dialog/>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog.vue";
+
+export default {
+  name: "Son",
+  components:{Dialog}
+ }
+</script>
+
+<style>
+  .son{
+    background-color: orange;
+    padding: 10px;
+  }
+</style>