second

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>

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>

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>

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>

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>

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>

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>

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>