second
This commit is contained in:
parent
abfb046f45
commit
cc538bbdef
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
23
src/App.vue
23
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>
|
||||
|
|
|
@ -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>
|
|
@ -0,0 +1,9 @@
|
|||
<script setup>
|
||||
import RoomMsgComment from './room-msg-comment.vue'
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
中间组件
|
||||
<RoomMsgComment />
|
||||
</div>
|
||||
</template>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue