Vue的子父組件傳值之小白必看篇
搭建的框架目錄結(jié)構(gòu)
一、父傳子動圖效果及源碼
父傳子源碼
父組件：
<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>消息來自父組件：</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>二、子傳父動圖效果
子傳父源碼
父組件：
<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>三、詳細解說組件傳遞過程：組件傳值模板
也可以說這部分的內(nèi)容是將組件的傳遞過程的關(guān)鍵代碼給抽離出來了，幫助大家更好的理解如何使用傳值！
1.父--->子
①屬性props
子組件利用props接收父組件傳遞過來的數(shù)據(jù)
指的是從外部設(shè)置的屬性，需子組件設(shè)置props屬性
注意：
props嚴格用于父組件與子組件之間的單向通訊，并且你不希望嘗試直接在子組件中更改props的值。
否則，將收到類似這樣的錯誤信息“避免直接修改某個prop，因為當(dāng)父組件重新渲染時，該值將被覆蓋” 這樣的錯誤。
父組件：
1.點擊事件進行傳值，在template中添加組件
<button?@click="OK">給子組件發(fā)送一個消息</button>
2.父組件自定義方法將data里的數(shù)據(jù)傳遞過去：
<子組件名稱 :自定義事件="綁定的方法"></子組名稱>
data()?{
????return?{
??????自定義事件:?""
????};
??},3.引用子組件：
import 子組件名稱 from "子組件路徑";
4.注冊子組件，注冊位置與methods同級：
components:?{
????子組件名稱
??},5.在methods中寫入點擊事件
methods:?{
????OK()?{
??????this.自自定義事件?=?"傳遞過去的數(shù)據(jù)";
????}
??}子組件：
1.定義個插糟，接收渲染傳遞過來的數(shù)據(jù)
<div?v-html="自定義事件"></div>
1.接收父組件傳遞過來的值
<script>
export?default?{
??props:?["自定義事件"],
};②引用refs傳值
父組件通過refs給子組件傳值
父組件：
1.引用子組件：
import 子組件名稱 from "子組件路徑";
2.注冊子組件，注冊位置與methods同級：
components:?{
????子組件名稱
??},3.看你是什么需求了，什么需求寫在什么函數(shù)下：
周期函數(shù)(){this.$refs.父組件名稱.子組件名稱=“傳遞的參數(shù)”}
4.聲明父組件名稱：
<子組件名稱 ref=“父組件名稱”></子組件名稱>
子組件：
1.聲明子組件：
<組件名稱>子組件名稱</組件名稱>
2.將子組件名稱定義到data中：
data（）{return{子組件名稱：}}2.子--->父
①屬性emit
子組件：
1.利用插值表達式顯示傳遞過去的數(shù)據(jù)：
<span>{{子組件數(shù)據(jù)}}</span>2.將變量定義到data中
export?default?{
??data()?{
????return?{
??????子組件數(shù)據(jù):?"子組件的數(shù)據(jù)"
????};
??},
}3.點擊事件進行傳值，在template中添加組件：
<button?@click="ok">OK</button>
4.向父組件傳值，在methods下定義事件：
methods:?{
????ok()?{
??????this.$emit("自定義事件",?this.子組件數(shù)據(jù));
????}
??}
};父組件：
偵聽自定義事件
1.利用插值表達式，將子組件傳遞過來的數(shù)據(jù)顯示出來
<span>{{插值表達式}}</span>2.將變量自定義到data中
export?default?{
data()?{
????return?{
??????插值表達式:?""
????};
??},
};3.父組件自定義方法偵聽子組件傳過來的值：
<子組件名稱 @自定義事件="綁定的方法"></子組名稱>
4.引用子組件：
import 子組件名稱 from "子組件路徑";
5.注冊子組件，注冊位置與methods同級：
components:?{
????子組件名稱
??},6.在methods中偵聽子組件傳過來的值：
methods:?{
????自定義事件(子組件數(shù)據(jù))?{
??????this.插值表達式?=?子組件數(shù)據(jù);
????}
??}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3?+?elementPlus?reset重置表單問題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中封裝echarts公共組件過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家介紹了Vue?入口與?initGlobalAPI實例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
國際化就是指在一個項目中，項目中的語言可以進行切換（中英文切換），那么在實際項目中是如何實現(xiàn)的呢，本文就給大家詳細的介紹實現(xiàn)方法,需要的朋友可以參考下2023-07-07
前端Vue中常用rules校驗規(guī)則(輪子)如電話身份證郵箱等校驗方法例子
當(dāng)我們在開發(fā)應(yīng)用時經(jīng)常需要對表單進行校驗,以確保用戶輸入的數(shù)據(jù)符合預(yù)期,這篇文章主要給大家介紹了關(guān)于前端Vue中常用rules校驗規(guī)則(輪子)如電話身份證郵箱等校驗方法的相關(guān)資料,需要的朋友可以參考下2023-12-12
本文通過實例代碼給大家介紹了Vue2.0權(quán)限樹組件實現(xiàn)代碼，需要的的朋友參考下吧2017-08-08
本文主要介紹了Vue實現(xiàn)DOM元素拖放互換位置示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
本篇文章主要介紹了詳解vee-validate的使用個人小結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-06-06
這篇文章主要介紹了vue3.0 自適應(yīng)不同分辨率電腦的操作,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式
最近的項目完成后,在性能優(yōu)化階段需要做按鈕的防止重復(fù)點擊功能,本文主要介紹了vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式,具有一定的參考價值,感興趣的可以了解一下2023-08-08