Vue3常用的通訊方式總結(jié)與實(shí)例代碼

更新時(shí)間：2022年05月29日 09:28:35 作者：一只豆豆

Vue.js中一個(gè)很重要的知識點(diǎn)是組件通信,不管是業(yè)務(wù)類的開發(fā)還是組件庫開發(fā),都有各自的通訊方法,下面這篇文章主要給大家介紹了關(guān)于Vue3常用的通訊方式的相關(guān)資料,需要的朋友可以參考下

前言

Vue3更新了很久了，但是之前項(xiàng)目都是用Vue2寫的，最近去官網(wǎng)look了一波，在這里總結(jié)一下Vue3常用的通訊方式。
尤大大，不要再更新了，真的學(xué)不動(dòng)了。

本文用的是Vue3.2版本的setup語法糖官網(wǎng)

props

父組件

    <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('一只豆豆')
        // 傳遞復(fù)雜類型數(shù)據(jù)
        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>

$emit

父組件

    <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']) // 如果有多個(gè)emit事件可以往數(shù)組后邊添加即可
        
        const handleClick = ()=>{
            emit("myClick", "emit傳遞信息")
        }
    </script>

EventBus

在Vue3中就沒有EventBus了，可以使用mitt.js來替代
安裝

$ npm install --save mitt

bus.js

    import mitt from 'mitt'
    export default mitt()

兄弟組件A emit觸發(fā)

    <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>

v-model

Vue2版本是可以通過修飾符.sync讓子組件修改父組件的值，但是Vue3就取消這個(gè)修飾符，融合到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里面就不會(huì)有告警了
        const emit = defineEmits(['update:name', 'update:age'])
        const handleChange = () => {
          emit('update:name', '一只豆豆')
          emit('update:age', 18)
        }
    </script>

expose / ref

子組件通過 expose 暴露屬性和方法出去
父組件通過 ref 來獲取子組件的值和調(diào)用方法

父組件

    <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

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 傳遞數(shù)據(jù)不是響應(yīng)式的，所以只能通過傳遞一個(gè)對象數(shù)據(jù)才能變成響應(yīng)式
Vue3使用 provide / inject傳遞數(shù)據(jù)就是響應(yīng)式了，這就很便捷

插槽 slot

普通插槽

父組件

    <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}" 子組件返回的每一項(xiàng)數(shù)據(jù) -->
      <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" 返回每一項(xiàng) -->
        <slot v-for="item in arr" :scope="item" />
      </div>
    </template>

    <script setup>
        const props = defineProps({
          arr: {
            type: Array,
            default: () => []
          }
        })
    </script>

效果圖

結(jié)語

到此這篇關(guān)于Vue3常用的通訊方式的文章就介紹到這了,更多相關(guān)Vue3通訊方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue3
通訊

相關(guān)文章

Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解
這篇文章主要介紹了Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解
今天小編就為大家分享一篇vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。這篇文章主要介紹了ztree在vue項(xiàng)目中使用并且?guī)в兴阉鞴δ?需要的朋友可以參考下
2018-08-08

Vue-router路由該如何使用

這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

2021-03-03

vue?watch監(jiān)聽方法總結(jié)

這篇文章主要給大家分享的是vue?watch監(jiān)聽方法總結(jié)，偵聽器一般來說是用來監(jiān)聽數(shù)據(jù)的變化，默認(rèn)是在數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行。監(jiān)聽的數(shù)據(jù)名放到這里面作為函數(shù)名，這個(gè)函數(shù)里面有兩個(gè)參數(shù)，一個(gè)是新值，一個(gè)是舊值。下面我們就一起進(jìn)入文章了解更具體的內(nèi)容吧

2021-12-12

Vue中的路由配置項(xiàng)meta使用解析

這篇文章主要介紹了Vue中的路由配置項(xiàng)meta使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

2022-10-10

Echarts之圖例legend基本配置方式

這篇文章主要介紹了Echarts只圖例legend基本配置方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

2023-04-04

vue3渲染函數(shù)(h函數(shù))的變更剖析

這篇文章主要介紹了vue3渲染函數(shù)(h函數(shù))的變化,文中給大家介紹了h函數(shù)的三個(gè)參數(shù)詳細(xì)說明及vue3 h函數(shù)-綁定事件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

2022-10-10

Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析

這篇文章主要介紹了Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

2019-08-08

vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解

這篇文章主要介紹了vue+webpack實(shí)現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實(shí)現(xiàn)異步組件加載的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

2018-04-04

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具