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)文章
vue3?+?elementPlus?reset重置表單問(wèn)題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中封裝echarts公共組件過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue?入口與?initGlobalAPI實(shí)例剖析
這篇文章主要為大家介紹了Vue?入口與?initGlobalAPI實(shí)例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
在vue3項(xiàng)目中實(shí)現(xiàn)國(guó)際化的代碼示例
國(guó)際化就是指在一個(gè)項(xiàng)目中，項(xiàng)目中的語(yǔ)言可以進(jìn)行切換（中英文切換），那么在實(shí)際項(xiàng)目中是如何實(shí)現(xiàn)的呢，本文就給大家詳細(xì)的介紹實(shí)現(xiàn)方法,需要的朋友可以參考下2023-07-07
前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法例子
當(dāng)我們?cè)陂_(kāi)發(fā)應(yīng)用時(shí)經(jīng)常需要對(duì)表單進(jìn)行校驗(yàn),以確保用戶輸入的數(shù)據(jù)符合預(yù)期,這篇文章主要給大家介紹了關(guān)于前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue2.0權(quán)限樹(shù)組件實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家介紹了Vue2.0權(quán)限樹(shù)組件實(shí)現(xiàn)代碼，需要的的朋友參考下吧2017-08-08
本文主要介紹了Vue實(shí)現(xiàn)DOM元素拖放互換位置示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
詳解vee-validate的使用個(gè)人小結(jié)
本篇文章主要介紹了詳解vee-validate的使用個(gè)人小結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-06-06
這篇文章主要介紹了vue3.0 自適應(yīng)不同分辨率電腦的操作,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
vue uniapp 防止按鈕多次點(diǎn)擊的三種實(shí)現(xiàn)方式
最近的項(xiàng)目完成后,在性能優(yōu)化階段需要做按鈕的防止重復(fù)點(diǎn)擊功能,本文主要介紹了vue uniapp 防止按鈕多次點(diǎn)擊的三種實(shí)現(xiàn)方式,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08