From cc538bbdef54df3b54d9322c6339d298bd912646 Mon Sep 17 00:00:00 2001
From: liwei <Zerroi@foxmail.com>
Date: Sun, 4 Aug 2024 18:54:21 +0800
Subject: [PATCH] second

---
 src/06-father-son communication.vue | 37 +++++++++++++++++++++++++++
 src/07-template-reference.vue       | 16 ++++++++++++
 src/08-cross-component.vue          | 24 ++++++++++++++++++
 src/App.vue                         | 23 +++++++++++++++--
 src/components/room-msg-comment.vue | 20 +++++++++++++++
 src/components/room-msg-item.vue    |  9 +++++++
 src/components/son-com.vue          | 39 +++++++++++++++++++++++++++++
 src/components/test-com.vue         | 13 ++++++++++
 8 files changed, 179 insertions(+), 2 deletions(-)
 create mode 100644 src/06-father-son communication.vue
 create mode 100644 src/07-template-reference.vue
 create mode 100644 src/08-cross-component.vue
 create mode 100644 src/components/room-msg-comment.vue
 create mode 100644 src/components/room-msg-item.vue
 create mode 100644 src/components/son-com.vue
 create mode 100644 src/components/test-com.vue

diff --git a/src/06-father-son communication.vue b/src/06-father-son communication.vue
new file mode 100644
index 0000000..849ab07
--- /dev/null
+++ b/src/06-father-son communication.vue	
@@ -0,0 +1,37 @@
+<!-- 父传子 -->
+<!-- <script setup>
+import { ref } from 'vue'
+import SonCom from './components/son-com.vue'
+const count = ref(100)
+
+setTimeout(() => {
+  count.value = 200
+}, 3000)
+</script>
+
+<template>
+  <div class="father">
+    <h2>父组件App</h2>
+    <SonCom :count="count" message="father message" />
+  </div>
+</template>
+
+<style scoped>
+.father {
+  border: 1px solid red;
+}
+</style> -->
+<!-- 子传父 -->
+<script setup>
+import SonCom from './components/son-com.vue'
+const getMessage = (msg) => {
+  console.log(msg)
+}
+</script>
+
+<template>
+  <div class="father">
+    <h2>父组件App</h2>
+    <SonCom @get-message="getMessage" />
+  </div>
+</template>
diff --git a/src/07-template-reference.vue b/src/07-template-reference.vue
new file mode 100644
index 0000000..cd33fb0
--- /dev/null
+++ b/src/07-template-reference.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import TestCom from './components/test-com.vue'
+
+const h1Ref = ref(null)
+const comRef = ref(null)
+// 组件挂载完毕才能获取
+onMounted(() => {
+  console.log(h1Ref.value)
+  console.log(comRef.value)
+})
+</script>
+<template>
+  <h1 ref="h1Ref">Hello World</h1>
+  <TestCom ref="comRef" />
+</template>
diff --git a/src/08-cross-component.vue b/src/08-cross-component.vue
new file mode 100644
index 0000000..6434446
--- /dev/null
+++ b/src/08-cross-component.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { provide, ref } from 'vue'
+import RoomMsgItem from './components/room-msg-item.vue'
+
+provide('data-key', 'this is room msg data')
+
+// 传递响应式数据
+const roomData = ref('')
+provide('data-key-reactive', roomData)
+
+// 传递方法
+const setRoomData = () => {
+  roomData.value = 'hello'
+}
+provide('setRoomData-key', setRoomData)
+</script>
+
+<template>
+  <div class="page">
+    顶层组件
+    <RoomMsgItem />
+    <button @click="roomData = 'hello'">修改响应式数据</button>
+  </div>
+</template>
diff --git a/src/App.vue b/src/App.vue
index 2d7ac59..6434446 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,24 @@
-<script setup></script>
+<script setup>
+import { provide, ref } from 'vue'
+import RoomMsgItem from './components/room-msg-item.vue'
+
+provide('data-key', 'this is room msg data')
+
+// 传递响应式数据
+const roomData = ref('')
+provide('data-key-reactive', roomData)
+
+// 传递方法
+const setRoomData = () => {
+  roomData.value = 'hello'
+}
+provide('setRoomData-key', setRoomData)
+</script>
 
 <template>
-  <div></div>
+  <div class="page">
+    顶层组件
+    <RoomMsgItem />
+    <button @click="roomData = 'hello'">修改响应式数据</button>
+  </div>
 </template>
diff --git a/src/components/room-msg-comment.vue b/src/components/room-msg-comment.vue
new file mode 100644
index 0000000..7da955a
--- /dev/null
+++ b/src/components/room-msg-comment.vue
@@ -0,0 +1,20 @@
+<script setup>
+import { inject } from 'vue'
+
+const roomDate = inject('data-key')
+const reactiveRoomData = inject('data-key-reactive')
+const setRoomDataFun = inject('setRoomData-key')
+</script>
+
+<template>
+  <div>
+    底层组件
+    <div>来自顶层组件的数据为: {{ roomDate }}</div>
+  </div>
+
+  <div>来自顶层组件的响应式数据为: {{ reactiveRoomData }}</div>
+
+  <div>
+    <button @click="setRoomDataFun">修改顶层响应式数据</button>
+  </div>
+</template>
diff --git a/src/components/room-msg-item.vue b/src/components/room-msg-item.vue
new file mode 100644
index 0000000..800f83b
--- /dev/null
+++ b/src/components/room-msg-item.vue
@@ -0,0 +1,9 @@
+<script setup>
+import RoomMsgComment from './room-msg-comment.vue'
+</script>
+<template>
+  <div>
+    中间组件
+    <RoomMsgComment />
+  </div>
+</template>
diff --git a/src/components/son-com.vue b/src/components/son-com.vue
new file mode 100644
index 0000000..7233e91
--- /dev/null
+++ b/src/components/son-com.vue
@@ -0,0 +1,39 @@
+<!-- 父传子 -->
+<!-- <script setup>
+// define props接收数据
+const props = defineProps({
+  message: {
+    type: String,
+    required: true
+  },
+  count: {
+    type: Number,
+    required: true
+  }
+})
+
+console.log(props)
+</script>
+
+<template>
+  <div class="son">
+    <h3>子组件</h3>
+    <div>父组件传入的消息:{{ message }}</div>
+    <div>父组件传入的count:{{ count }}</div>
+  </div>
+</template> -->
+
+<!-- 子传父 -->
+<script setup>
+// 通过defineEmits定义自定义事件
+const emit = defineEmits(['get-message'])
+const sendMessage = () => {
+  emit('get-message', 'son message')
+}
+</script>
+
+<template>
+  <div>
+    <button @click="sendMessage">发送消息</button>
+  </div>
+</template>
diff --git a/src/components/test-com.vue b/src/components/test-com.vue
new file mode 100644
index 0000000..ebdda86
--- /dev/null
+++ b/src/components/test-com.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('this is a test message')
+const setMessage = () => {
+  message.value = 'this is a new message'
+}
+defineExpose({ message, setMessage })
+</script>
+
+<template>
+  <div>我是子组件</div>
+</template>