七種Vue3傳值方式 props emit v-model refs provide/inject eventBus vuex/pinia(狀態管理工具)

Props方式

Props方式是Vue中最常見的一種父傳子的一種方式
父組件代碼如下：

<template><child-components :list="list"></child-components><div><input v-model="value" type="text" placeholder="請輸入"/><button @click="handleAdd" type="button">添加</button></div> </template> <script setup> import { ref } from 'vue' import ChildComponents from './child.vue' const list = ref(['JavaScript', 'HTML', 'CSS']) const a= ref('1') // add 觸發后的事件處理函數 const handleAdd = () => {list.value.push(a.value) } </script>

子組件只需要對父組件傳遞的值進行渲染即可，代碼如下：

<template><ul ><li v-for="i in props.list" :key="i">{{ i }}</li></ul> </template> <script setup> import { defineProps } from 'vue' const props = defineProps({list: {type: Array,default: () => [],}, }) </script>

emit方式

emit方式也是Vue中最常見的組件通信方式，該方式用于子傳父；

子組件代碼如下： <template><div ><input v-model="value" type="text" placeholder="請輸入"/><button @click="handleSubmit" type="button">添加</button></div> </template> <script setup> import { ref, defineEmits } from 'vue' const a= ref('1') const emits = defineEmits(['add']) const handleSubmit = () => {emits('add', a.value)a.value = '' } </script> 在子組件中點擊【添加】按鈕后，emit一個自定義事件，并將添加的值作為參數傳遞。

父組件代碼如下：

<template><ul><li v-for="i in list" :key="i">{{ i }}</li></ul><child-components @add="handleAdd"></child-components> </template> <script setup> import { ref } from 'vue' import ChildComponents from './child.vue' const list = ref(['JavaScript', 'HTML', 'CSS']) // add 觸發后的事件處理函數 const handleAdd = value => {list.value.push(value) } </script>

在父組件中只需要監聽子組件自定義的事件，然后執行對應的添加操作。

v-model

v-model是Vue中一個比較出色的語法糖，就比如下面這段代碼

<ChildComponent v-model:title="pageTitle" /> // 就是下面這段代碼的簡寫形勢 <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

子組件

<template><div><input v-model="value" placeholder="請輸入"/><button @click="handleAdd" type="button">添加</button></div> </template> <script setup> import { ref, defineEmits, defineProps } from 'vue' const value = ref('') const props = defineProps({list: {type: Array,default: () => [],}, }) const emits = defineEmits(['update:list']) // 添加操作 const handleAdd = () => {const arr = props.listarr.push(value.value)emits('update:list', arr)value.value = '' } </script>

在子組件中我們首先定義props和emits，然后添加完成之后emit指定事件。
注：update:*是Vue中的固定寫法，*表示props中的某個屬性名。

父組件中使用就比較簡單，代碼如下： <template><!-- 父組件 --><ul ><li v-for="i in list" :key="i">{{ i }}</li></ul><!-- 子組件 --><child-components v-model:list="list"></child-components> </template> <script setup> import { ref } from 'vue' import ChildComponents from './child.vue' const list = ref(['JavaScript', 'HTML', 'CSS']) </script>

refs

在使用選項式API時，我們可以通過this.$refs.name的方式獲取指定元素或者組件，但是組合式API中就無法使用哪種方式獲取。如果我們想要通過ref的方式獲取組件或者元素，需要定義一個同名的Ref對象，在組件掛載后就可以訪問了。

<template><ul><li v-for="i in childRefs?.list" :key="i">{{ i }}</li></ul><!-- 子組件 ref的值與<script>中的保持一致 --><child-components ref="childRefs"></child-components><!-- 父組件 --> </template> <script setup> import { ref } from 'vue' import ChildComponents from './child.vue' const childRefs = ref(null) </script>

子組件

<template><div><input v-model="value" placeholder="請輸入"/><button @click="handleAdd" type="button">添加</button></div> </template> <script setup> import { ref, defineExpose } from 'vue' const list = ref(['JavaScript', 'HTML', 'CSS']) const a= ref('1') // add 觸發后的事件處理函數 const handleAdd = () => {list.value.push(a.value)a.value = '' } defineExpose({ list }) </script>

setup組件默認是關閉的，也即通過模板ref獲取到的組件的公開實例，不會暴露任何在**

provide/inject

provide和inject是Vue中提供的一對API，該API可以實現父組件向子組件傳遞數據，無論層級有多深，都可以通過這對API實現。示例代碼如下所示：

父組件

<template><!-- 子組件 --><child-components></child-components><!-- 父組件 --><div><input v-model="value" placeholder="請輸入"/><button @click="handleAdd" type="button">添加</button></div> </template> <script setup> import { ref, provide } from 'vue' import ChildComponents from './child.vue' const list = ref(['JavaScript', 'HTML', 'CSS']) const a= ref('') // 向子組件提供數據 provide('list', list.value) // add 觸發后的事件處理函數 const handleAdd = () => {list.value.push(a.value)a.value = '' } </script>

子組件

<template><ul ><li v-for="i in list" :key="i">{{ i }}</li></ul> </template> <script setup> import { inject } from 'vue' // 接受父組件提供的數據 const list = inject('list') </script>

使用provide進行數據傳遞時，盡量readonly進行數據包裝，避免子組件修改父級傳遞過去的數據。

事件總線

Vue3中移除了事件總線，但是可以借助于第三方工具來完成，Vue官方推薦mitt[2]或tiny-emitter[3]

狀態管理工具

Vuex[4]和Pinia[5]可以輕松實現組件通信，由于這兩個工具功能比較強大，具體可以查閱文檔

總結

以上是生活随笔為你收集整理的七种Vue3传值方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。