vue3中的組件間的傳值(props)
更新時間：2023年04月24日 09:17:36 作者：拾柒念
這篇文章主要介紹了vue3中的組件間的傳值(props)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3組件間的傳值(props)
父組件向子組件傳值
在父組件中：
1.引入ref
2.定義要傳遞的屬性和屬性值
3.向vue頁面中的子組件傳遞該屬性屬性
傳遞屬性
:傳給子組件的名字（自定義） = “對應定義在父組件的屬性名”
在子組件中：
4.接收父組件傳來的屬性
props: {
showDialogVisible: Boolean
},
setup() {
return {
}
}
5.注冊該組件
setup(props) {
// 可以打印查看一下props傳過來的屬性以及屬性的值
console.log(props);
return {
props
}
}
6.在子組件的頁面使用該屬性
父組件向子組件傳值完成！
子組件向父組件傳值（常規(guī)）
- 在子組件中：
由于vue數(shù)據(jù)傳遞是單向數(shù)據(jù)流，子組件沒有權(quán)利修改父組件傳過來的數(shù)據(jù)，只能請求父組件對原始數(shù)據(jù)進行修改，用emit 通知父組件去修改。
1.在子組件中定義要修改父組件那個屬性（或方法）的值
setup(props,context) {
context.emit('setShow', false);
return {
}
}
//也可以：es6解構(gòu)賦值取到emit
//setup(props,{emit}) {
// emit('setShow', false);
//
// return {
// }
//}
context.emit(‘傳入父組件自定義的屬性名’, 屬性值);
- 在父組件中：
2.再頁面接收子組件中傳入的自定義屬性名，綁定在自身對應的屬性（方法）上
父組件向子組件傳值完成！
附上我的父組件方法：
子組件向父組件傳值（v-model）
? 如果子組件向父組件傳的值正好是父組件向子組件傳的值，可以直接在該屬性上進行雙向綁定。
注：閱讀此小節(jié)建議先看完第一節(jié)：父組件向子組件傳值
- 在子組件上：
1.直接修改從props中拿到的屬性
- 在父組件上：
2.在父頁面中的子組件上進行綁定
傳值完成！
vue3組件之間傳值和事件處理
這篇文章前自己也網(wǎng)上找了資料，發(fā)現(xiàn)這塊資料極少，所以還是自己記錄一下
項目需求是每個頁面需要加上頂部導航欄，加返回事件
先寫子組件代碼，在components目錄下建一個nav.vue文件：
子組件nav.vue文件內(nèi)容
<template>
<div>
<el-affix position="top" :offset="0">
<div class="nav">
<span @click="backGo"><img src="../assets/back.png"/>返回</span>
<p>{{title}}</p>
</div>
</el-affix>
</div>
</template>
<script setup>
import{ defineProps } from "vue"
const props =defineProps({ //子組件定義接收父組件傳過來的值
title:String
})
//點擊返回事件
const backGo = () => {
history.back()
}
</script>
<style scoped>
.nav{width: 100%;height:.6rem;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;background-color: #ffffff;border-bottom: 1px solid #f0f0f0;}
.nav span{position: absolute;height:100%;left: .2rem;top: 0;display: flex;align-items: center;color: #8a8a8a;}
.nav span img{width: .32rem;}
</style>父組件aboutus.vue文件：
<template>
<div class="wrap">
<Nav title="關于我們"></Nav> <!--記住這里第一個字母大寫哦-->
<div class="lists">
<ul class="abus">
<li><p><router-link to="/company">公司介紹</router-link></p></li>
<li><p><router-link to="/privacy">隱私政策</router-link></p></li>
<li><p><router-link to="/useragree">用戶協(xié)議</router-link></p></li>
</ul>
</div>
</div>
</template>
<script setup>
import Nav from '@/components/nav.vue'
</script>記住引入子組件時，第一個字母大寫哦 ！
是不是很簡單！
下面介紹子組件傳值
同樣是拿子組件nav.vue來測試，直接上代碼：
<template>
<div>
<el-affix position="top" :offset="0">
<div class="nav">
<span @click="backGo"><img src="../assets/back.png"/>返回</span>
<p>{{title}}</p>
</div>
</el-affix>
</div>
</template>
<script setup>
import{ defineProps ,defineEmits} from "vue"
const emits =defineEmits(['getBackGo']) //注冊父組件回調(diào)方法
const props =defineProps({
title:String
})
const backGo = () => {
// history.back()
emits("getBackGo","傳個值給父組件！")
}
</script>
<style scoped>
.nav{width: 100%;height:.6rem;display: flex;align-items: center;justify-content: center;text-align: center;position: relative;background-color: #ffffff;border-bottom: 1px solid #f0f0f0;}
.nav span{position: absolute;height:100%;left: .2rem;top: 0;display: flex;align-items: center;color: #8a8a8a;}
.nav span img{width: .32rem;}
</style>來看看父組件aboutus.vue寫法：
<template>
<div class="wrap">
<Nav title="關于我們" @getBackGo="getBackGoInfo"></Nav>
<img src="../../assets/logo.jpg" class="logo"/>
<div class="lists">
<ul class="abus">
<li><p><router-link to="/company">公司介紹</router-link></p></li>
<li><p><router-link to="/privacy">隱私政策</router-link></p></li>
<li><p><router-link to="/useragree">用戶協(xié)議</router-link></p></li>
</ul>
</div>
</div>
</template>
<script setup>
import Nav from '@/components/nav.vue'
const getBackGoInfo = (value) => {
console.log(value)
}
</script>效果如下：
完美！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了Vue實現(xiàn)模糊查詢搜索功能的步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-10-10
這篇文章主要介紹了vue3移動端嵌入pdf的多種方法小結(jié),使用embed嵌入有好處也有缺點,本文給大家講解的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了js 實現(xiàn)拖拽排序，拖拽排序?qū)τ谛』锇閭儊碚f應該不陌生，平時工作的時候，可能會選擇使用類似Sortable.js這樣的開源庫來實現(xiàn)需求。但在完成需求后，大家有沒有沒想過拖拽排序是如何實現(xiàn)的呢？感興趣得話一起來看看下面文章得小心內(nèi)容吧2021-11-11
在現(xiàn)代前端開發(fā)的世界中,Vue 3 已然成為了一個備受喜愛的框架,而 Vite 作為一個新興的構(gòu)建工具,以其極高的效率和簡捷的配置方式席卷了開發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構(gòu)建一個 Vue 3 項目,從創(chuàng)建項目到最后的構(gòu)建階段,需要的朋友可以參考下2024-07-07
基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-03-03
解決vue.js中settimeout遇到的問題(時間參數(shù)短效果不穩(wěn)定)
這篇文章主要介紹了解決vue.js中settimeout遇到的問題(時間參數(shù)短效果不穩(wěn)定)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue3?使用v-md-editor如何動態(tài)上傳圖片的方法實現(xiàn)
本文主要介紹了Vue3?使用v-md-editor如何動態(tài)上傳圖片，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
如果說是JQuery是手工作坊,那么Vue.js就像是一座工廠,雖然Vue.js做的任何事情JQuery都可以做,但無論是代碼量還是流程規(guī)范性都是前者較優(yōu),下面這篇文章主要給大家介紹了關于Vue項目中如何運用vuex的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue中的baseurl如何配置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
深入了解vue-router原理并實現(xiàn)一個小demo
這篇文章主要為大家詳細介紹了vue-router原理并實現(xiàn)一個小demo，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03