溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue3常用的通訊方式有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue3常用的通訊方式有哪些”吧！
父組件
<template>
<div>
<Child :msg="msg" :obj="obj" />
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
// Vue3.2版本setup語法糖引入組件不需要注冊便可以使用組件
import Child from './child.vue'
const msg = ref('一只豆豆')
// 傳遞復雜類型數據
const obj = reactive({name: '豆豆'})
</script>子組件
<template>
<div></div>
</template>
<script setup>
// Vue3.2版本setup語法糖 defineProps 不需要引入可以直接使用
const props = defineProps({
msg: {
type: String,
default: ''
},
obj: {
type: Object,
default: () => {}
}
})
console.log('msg', props.msg); // 一只豆豆
console.log('obj', props.obj.name); // 豆豆
</script>父組件
<template>
<div>
<Child @myClick="myClick" />
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import Child from './child.vue'
const myClick = val => {
console.log('val', val); // emit傳遞信息
}
</script>子組件
<template>
<div>
<button @click="handleClick">click me</button>
</div>
</template>
<script setup>
// Vue3.2版本setup語法糖 defineEmits 不需要引入可以直接使用
const emit = defineEmits(['myClick']) // 如果有多個emit事件可以往數組后邊添加即可
const handleClick = ()=>{
emit("myClick", "emit傳遞信息")
}
</script>在Vue3中就沒有EventBus了，可以使用mitt.js來替代
安裝
$ npm install --save mitt
bus.js
import mitt from 'mitt' export default mitt()
兄弟組件A emit觸發
<template>
<div>
<button @click="handleClick">click me</button>
</div>
</template>
<script setup>
import bus from './bus'
const handleClick = () => {
bus.emit('foo', '豆豆')
}
</script>兄弟組件B on接收
<template>
<div></div>
</template>
<script setup>
import bus from './bus'
bus.on('foo', e => {
console.log('e', e) // '豆豆'
})
</script>Vue2版本是可以通過修飾符.sync讓子組件修改父組件的值，但是Vue3就取消這個修飾符，融合到v-model里邊去了
父組件
<template>
<div>
<div>{{ name }}</div>
<div>{{ age }}</div>
<Child v-model:name="name" v-model:age="age" />
</div>
</template>
<script setup>
import Child from './child.vue'
import { ref } from 'vue'
const name = ref('豆豆')
const age = ref(20)
</script>子組件
<template>
<div>
<div></div>
<button @click="handleChange">click me</button>
</div>
</template>
<script setup>
// 'update:name' 這樣寫在console里面就不會有告警了
const emit = defineEmits(['update:name', 'update:age'])
const handleChange = () => {
emit('update:name', '一只豆豆')
emit('update:age', 18)
}
</script>子組件通過 expose 暴露屬性和方法出去
父組件通過 ref 來獲取子組件的值和調用方法
父組件
<template>
<div>
<Child ref="myRef" />
<button @click="handleClick">click me</button>
</div>
</template>
<script setup>
import Child from './child.vue'
import { ref } from 'vue'
const myRef = ref(null)
const handleClick = () => {
console.log('myRef', myRef.value.name) // 豆豆
myRef.value.fn() // 一只豆豆
}
</script>子組件
<template>
<div>
<div></div>
</div>
</template>
<script setup>
// Vue3.2版本setup語法糖 defineExpose 不需要引入可以直接使用
defineExpose({
name: '豆豆',
fn () {
console.log('一只豆豆')
}
})
</script>provide / inject 可以給后代組件傳參，嵌套多少層都沒問題
父組件
<template>
<div>
<Child />
</div>
</template>
<script setup>
import Child from './child.vue'
import { ref, provide } from 'vue'
const name = ref('豆豆')
provide('name', name)
</script>后代組件
<template>
<div>
<div>后代組件name {{ name }}</div>
</div>
</template>
<script setup>
import { inject } from 'vue'
const name = inject('name')
console.log('name', name.value) // 豆豆
</script>Vue2使用 provide / inject 傳遞數據不是響應式的，所以只能通過傳遞一個對象數據才能變成響應式
Vue3使用 provide / inject傳遞數據就是響應式了，這就很便捷
父組件
<template> <div> <Child>豆豆</Child> </div> </template> <script setup> import Child from './child.vue' </script>
子組件
<template> <div> <slot></slot> </div> </template> <script setup></script>
<template> <div> <Child> 豆豆 <template #name> <div> <button>一只豆豆</button> </div> </template> </Child> </div> </template> <script setup> import Child from './child.vue' </script>
子組件
<template> <div> // 普通插槽 <slot></slot> // 具名插槽 <slot name="name"></slot> </div> </template> <script setup></script>
效果圖
父組件
<template>
<!-- v-slot="{scope}" 子組件返回的每一項數據 -->
<Child v-slot="{ scope }" :arr="arr">
<div class="box">
<div>名字：{{ scope.name }}</div>
<div>年齡：{{ scope.age }}</div>
<div>愛好：{{ scope.like }}</div>
</div>
</Child>
</template>
<script setup>
import { reactive } from 'vue'
import Child from './child.vue'
const arr = reactive([
{ name: '張三', age: 18, like: '籃球' },
{ name: '李四', age: 19, like: '排球' },
{ name: '王五', age: 20, like: '足球' }
])
</script>
<style lang="less">
.box {
display: inline-block;
width: 200px;
border: dashed blue 1px;
margin-right: 15px;
padding: 10px;
}
</style>子組件
<template>
<div>
<!-- :scope="item" 返回每一項 -->
<slot v-for="item in arr" :scope="item" />
</div>
</template>
<script setup>
const props = defineProps({
arr: {
type: Array,
default: () => []
}
})
</script>效果圖
感謝各位的閱讀，以上就是“Vue3常用的通訊方式有哪些”的內容了，經過本文的學習后，相信大家對Vue3常用的通訊方式有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
