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>
|
<template>
|
||||||
<div></div>
|
<div class="page">
|
||||||
|
顶层组件
|
||||||
|
<RoomMsgItem />
|
||||||
|
<button @click="roomData = 'hello'">修改响应式数据</button>
|
||||||
|
</div>
|
||||||
</template>
|
</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