Vue的子父組件傳值之小白必看篇
搭建的框架目錄結(jié)構(gòu)
一、父?jìng)髯觿?dòng)圖效果及源碼
父?jìng)髯釉创a
父組件：
<template> ? <div> ? ? <div> ? ? ? <p v-html="theCardTitle"></p> ? ? ? <button @click="sendMessage">OK</button> ? ? </div> ? ? <div> ? ? ? <ChildCard :parentMessage="parentMessage"></ChildCard> ? ? </div> ? </div> </template>
<script>
import ChildCard from "../sub/ChildCard";
export default {
? data() {
? ? return {
? ? ? theCardTitle: "父組件",
? ? ? parentMessage: ""
? ? };
? },
? components: {
? ? ChildCard
? },
? methods: {
? ? sendMessage() {
? ? ? this.parentMessage = "<b>消息來(lái)自父組件：</b> (^_^)!";
? ? }
? },
};
</script>子組件：
<template> ? <div> ? ? <div> ? ? ? <p v-html="theCardBody"></p> ? ? ? <div v-html="parentMessage"></div> ? ? </div> ? </div> </template>
<script>
export default {
? props: ["parentMessage"],
? data() {
? ? return {
? ? ? theCardBody: "子組件"
? ? };
? }
};
</script>二、子傳父動(dòng)圖效果
子傳父源碼
父組件：
<template>
? <div>
? ? <div>
? ? ? <p v-html="theCardTitle"></p>
? ? ? <span>{{parentMessage}}</span>
? ? ? <ChildCardOne @childByValue="childByValue"></ChildCardOne>
? ? </div>
? </div>
</template><script>
import ChildCardOne from "../sub/ChildCardOne";
export default {
? data() {
? ? return {
? ? ? theCardTitle: "父組件",
? ? ? parentMessage: ""
? ? };
? },
? components: {
? ? ChildCardOne
? },
? methods: {
? ? childByValue(childValue) {
? ? ? this.parentMessage = childValue;
? ? }
? }
};
</script>子組件：
<template>
? <div>
? ? <p v-text="theCardTitle"></p>
? ? <span>{{childValue}}</span>
? ? <div>
? ? ? <button @click="ok">OK</button>
? ? </div>
? </div>
</template><script>
export default {
? data() {
? ? return {
? ? ? theCardTitle: "子組件",
? ? ? childValue: "我是子組件的數(shù)據(jù)"
? ? };
? },
? methods: {
? ? ok() {
? ? ? this.$emit("childByValue", this.childValue);
? ? }
? }
};
</script>三、詳細(xì)解說(shuō)組件傳遞過(guò)程：組件傳值模板
也可以說(shuō)這部分的內(nèi)容是將組件的傳遞過(guò)程的關(guān)鍵代碼給抽離出來(lái)了，幫助大家更好的理解如何使用傳值！
1.父--->子
①屬性props
子組件利用props接收父組件傳遞過(guò)來(lái)的數(shù)據(jù)
指的是從外部設(shè)置的屬性，需子組件設(shè)置props屬性
注意：
props嚴(yán)格用于父組件與子組件之間的單向通訊，并且你不希望嘗試直接在子組件中更改props的值。
否則，將收到類(lèi)似這樣的錯(cuò)誤信息“避免直接修改某個(gè)prop，因?yàn)楫?dāng)父組件重新渲染時(shí)，該值將被覆蓋” 這樣的錯(cuò)誤。
父組件：
1.點(diǎn)擊事件進(jìn)行傳值，在template中添加組件
<button?@click="OK">給子組件發(fā)送一個(gè)消息</button>
2.父組件自定義方法將data里的數(shù)據(jù)傳遞過(guò)去：
<子組件名稱(chēng) :自定義事件="綁定的方法"></子組名稱(chēng)>
data()?{
????return?{
??????自定義事件:?""
????};
??},3.引用子組件：
import 子組件名稱(chēng) from "子組件路徑";
4.注冊(cè)子組件，注冊(cè)位置與methods同級(jí)：
components:?{
????子組件名稱(chēng)
??},5.在methods中寫(xiě)入點(diǎn)擊事件
methods:?{
????OK()?{
??????this.自自定義事件?=?"傳遞過(guò)去的數(shù)據(jù)";
????}
??}子組件：
1.定義個(gè)插糟，接收渲染傳遞過(guò)來(lái)的數(shù)據(jù)
<div?v-html="自定義事件"></div>
1.接收父組件傳遞過(guò)來(lái)的值
<script>
export?default?{
??props:?["自定義事件"],
};②引用refs傳值
父組件通過(guò)refs給子組件傳值
父組件：
1.引用子組件：
import 子組件名稱(chēng) from "子組件路徑";
2.注冊(cè)子組件，注冊(cè)位置與methods同級(jí)：
components:?{
????子組件名稱(chēng)
??},3.看你是什么需求了，什么需求寫(xiě)在什么函數(shù)下：
周期函數(shù)(){this.$refs.父組件名稱(chēng).子組件名稱(chēng)=“傳遞的參數(shù)”}
4.聲明父組件名稱(chēng)：
<子組件名稱(chēng) ref=“父組件名稱(chēng)”></子組件名稱(chēng)>
子組件：
1.聲明子組件：
<組件名稱(chēng)>子組件名稱(chēng)</組件名稱(chēng)>
2.將子組件名稱(chēng)定義到data中：
data（）{return{子組件名稱(chēng)：}}2.子--->父
①屬性emit
子組件：
1.利用插值表達(dá)式顯示傳遞過(guò)去的數(shù)據(jù)：
<span>{{子組件數(shù)據(jù)}}</span>2.將變量定義到data中
export?default?{
??data()?{
????return?{
??????子組件數(shù)據(jù):?"子組件的數(shù)據(jù)"
????};
??},
}3.點(diǎn)擊事件進(jìn)行傳值，在template中添加組件：
<button?@click="ok">OK</button>
4.向父組件傳值，在methods下定義事件：
methods:?{
????ok()?{
??????this.$emit("自定義事件",?this.子組件數(shù)據(jù));
????}
??}
};父組件：
偵聽(tīng)自定義事件
1.利用插值表達(dá)式，將子組件傳遞過(guò)來(lái)的數(shù)據(jù)顯示出來(lái)
<span>{{插值表達(dá)式}}</span>2.將變量自定義到data中
export?default?{
data()?{
????return?{
??????插值表達(dá)式:?""
????};
??},
};3.父組件自定義方法偵聽(tīng)子組件傳過(guò)來(lái)的值：
<子組件名稱(chēng) @自定義事件="綁定的方法"></子組名稱(chēng)>
4.引用子組件：
import 子組件名稱(chēng) from "子組件路徑";
5.注冊(cè)子組件，注冊(cè)位置與methods同級(jí)：
components:?{
????子組件名稱(chēng)
??},6.在methods中偵聽(tīng)子組件傳過(guò)來(lái)的值：
methods:?{
????自定義事件(子組件數(shù)據(jù))?{
??????this.插值表達(dá)式?=?子組件數(shù)據(jù);
????}
??}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖
本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)鷹眼圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
假設(shè)?App?的用戶(hù)可以在短時(shí)間內(nèi)進(jìn)行多個(gè)?API?調(diào)用,但您只想顯示上次調(diào)用的結(jié)果,之前正在進(jìn)行的請(qǐng)求變得無(wú)關(guān)緊要,在這種情況下,您可以利用?Axios?攔截器,本文給大家介紹了如何使用Axios攔截器中止Vue請(qǐng)求,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue 實(shí)現(xiàn)圖片懶加載功能的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了如何解決Element UI中NavMenu折疊菜單的坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
class 與 style 綁定就是專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù),如果需要?jiǎng)討B(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧2023-10-10
provide/inject 適用于跨級(jí)通信，在孫組件中通過(guò)依賴(lài)注入的方式能獲取到父組件中改變的這個(gè)值，下面通過(guò)實(shí)例代碼介紹vue3-組合式api-provide/inject的相關(guān)知識(shí),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue工程如何為組件自動(dòng)注入全局樣式文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目中使用axios遇到的相對(duì)路徑和絕對(duì)路徑問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中使用axios遇到的相對(duì)路徑和絕對(duì)路徑問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue聲明式導(dǎo)航與編程式導(dǎo)航示例分析講解
這篇文章主要介紹了Vue中聲明式導(dǎo)航與編程式導(dǎo)航，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11
微信、支付寶支付密碼時(shí)的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實(shí)現(xiàn)?6位支付密碼輸入框，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04