目錄
搭建的框架目錄結構
一、父傳子動圖效果及源碼
父傳子源碼：
父組件：
<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: "我是子組件的數據"
};
},
methods: {
ok() {
this.$emit("childByValue", this.childValue);
}
}
};
</script>
三、詳細解說組件傳遞過程：組件傳值模板
也可以說這部分的內容是將組件的傳遞過程的關鍵代碼給抽離出來了，幫助大家更好的理解如何使用傳值！
1.父--->子
①屬性props
子組件利用props接收父組件傳遞過來的數據
指的是從外部設置的屬性，需子組件設置props屬性
注意：
props嚴格用於父組件與子組件之間的單向通訊，並且你不希望嘗試直接在子組件中更改props的值。
否則，將收到類似這樣的錯誤信息“避免直接修改某個prop，因爲當父組件重新渲染時，該值將被覆蓋” 這樣的錯誤。
父組件：
1.點擊事件進行傳值，在template中添加組件
<button @click="OK">給子組件發送一個消息</button>
2.父組件自定義方法將data裏的數據傳遞過去：
<子組件名稱 :自定義事件="綁定的方法"></子組名稱>
data() {
return {
自定義事件: ""
};
},
3.引用子組件：
import 子組件名稱 from "子組件路徑";
4.註冊子組件，註冊位置與methods同級：
components: {
子組件名稱
},
5.在methods中寫入點擊事件
methods: {
OK() {
this.自自定義事件 = "傳遞過去的數據";
}
}
子組件：
1.定義個插糟，接收渲染傳遞過來的數據
<div v-html="自定義事件"></div>
1.接收父組件傳遞過來的值
<script>
export default {
props: ["自定義事件"],
};
②引用refs傳值
父組件通過refs給子組件傳值
父組件：
1.引用子組件：
import 子組件名稱 from "子組件路徑";
2.註冊子組件，註冊位置與methods同級：
components: {
子組件名稱
},
3.看你是什麼需求了，什麼需求寫在什麼函數下：
週期函數(){this.$refs.父組件名稱.子組件名稱=“傳遞的參數”}
4.聲明父組件名稱：
<子組件名稱 ref=“父組件名稱”></子組件名稱>
子組件：
1.聲明子組件：
<組件名稱>子組件名稱</組件名稱>
2.將子組件名稱定義到data中：
data（）{return{子組件名稱：}}
2.子--->父
①屬性emit
子組件：
1.利用插值表達式顯示傳遞過去的數據：
<span>{{子組件數據}}</span>
2.將變量定義到data中
export default {
data() {
return {
子組件數據: "子組件的數據"
};
},
}
3.點擊事件進行傳值，在template中添加組件：
<button @click="ok">OK</button>
4.向父組件傳值，在methods下定義事件：
methods: {
ok() {
this.$emit("自定義事件", this.子組件數據);
}
}
};
父組件：
偵聽自定義事件
1.利用插值表達式，將子組件傳遞過來的數據顯示出來
<span>{{插值表達式}}</span>
2.將變量自定義到data中
export default {
data() {
return {
插值表達式: ""
};
},
};
3.父組件自定義方法偵聽子組件傳過來的值：
<子組件名稱 @自定義事件="綁定的方法"></子組名稱>
4.引用子組件：
import 子組件名稱 from "子組件路徑";
5.註冊子組件，註冊位置與methods同級：
components: {
子組件名稱
},
6.在methods中偵聽子組件傳過來的值：
methods: {
自定義事件(子組件數據) {
this.插值表達式 = 子組件數據;
}
}