我們在開發中，會自定義大量的組件，我們應該如何在兩個組件之間進行“值”的傳遞呢？
父子組件傳值
我們使用上一文中App.vue和HelloComp.vue組件來舉例
首先我們還是需要在APP.vue中引入HelloComp.vue
<template>
<div id="app">
<hello-comp></hello-comp>
</div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
components:{
HelloComp
},
data() {
return{
message: "app.Vue data 我是父組件"
}
}
}
<style>
</style>
這樣一來，關系就成為了
父組件是APP.vue,子組件是HelloComp.vue
父組件向子組件傳值（屬性）
使用屬性進行傳遞
我們想將App.vue中的message通過HelloComp組件顯示出來，應該怎么辦呢？
- 首先在App.vue中的HelloComp標簽自定義一個屬性
<Hello-comp :msg="message"></Hello-comp> - HelloComp組件如何獲取呢？
需要在HelloComp.vue中的export default中寫上如下，這樣子組件就拿到了父組件的資料
<script>
export default {
props:['msg'] //父級定義的屬性
}
</script>
一下是父組件向子組件傳遞資料的完整代碼示例：
App.vue
<template>
<div id="app">
<Hello-comp :msg="message"></Hello-comp>
</div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
components:{
HelloComp
},
data() {
return{
message: "app.Vue data 我是父組件"
}
}
}
</script>
<style>
</style>
HelloComp.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
props:['msg'] //父級定義的屬性
}
</script>
<style>
</style>
頁面呈現效果：
子級向父級傳遞資料（使用自定義事件）
通過自定義事件進行傳遞
需求：子組件中有一個按鈕，當我們點擊按鈕時，將子組件中的資料傳遞給父組件，然后在父組件中展示子組件傳遞過來的資料
簡單的說：子組件不能直接改變父組建的值，只能通過呼叫父組件的自定義事件間接改
- 在App.vue組件中的HelloComp標簽，系結一個自定義事件
myevent就是我們自定義的事件名稱，changeData為methods中定義的事件
<Hello-comp @myevent="changData" :msg="message"></Hello-comp>- 父組件App.vue中，設定一個childDate變數，先給他賦空值，一會兒我們從子集里面取資料
<template>
<div id="app">
<h1>{{childData}}</h1>
<Hello-comp @myevent="changDate" :msg="message"></Hello-comp>
</div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
components:{
HelloComp
},
data() {
return{
message: "app.Vue data 我是父組件",
childData:""
}
},
methods: {
changDate() {
}
}
}
</script>
<style>
</style>
- 現在我們來操作HelloComp.vue子組件，我們在子組件里面寫一個button，定義一個點擊事件
<button @click="sendData">傳遞資料</button>- 然后我們在子組件的data中，定義一個資料，
export default {
props:['msg'], //父級定義的屬性
data ()
{
return {
childData: "I'm Child"
}
},
- 現在我們如何將childData傳送給父組件呢？需要使用this.$emit("父級的方法名",子級要傳的參)方法
methods: {
sendData() {
this.$emit("myevent",this.childData) //emit方法就可以觸發父級組件的方法
}
}
-最后，我們在父組件的methods定義的changDate方法中，就可以取到子組件傳過來的childData，我們在父組件中使用 this.childData=https://www.cnblogs.com/Z-Hyi/archive/2022/08/08/childData來將父組件中的變數復制，這時父組件中就獲得了子組件的值
methods: {
changData(childData) {
this.childData = https://www.cnblogs.com/Z-Hyi/archive/2022/08/08/childData
}
}
- 最后，我們就可以在父組件中顯示出來
<h1>{{childData}}</h1>
以下是在父組件中，點擊按鈕后，就收到子組件的值并顯示出來
完整代碼：
App.vue
<template>
<div id="app">
<h1>{{childData}}</h1>
<Hello-comp @myevent="changData" :msg="message"></Hello-comp>
</div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
components:{
HelloComp
},
data() {
return{
message: "app.Vue data 我是父組件",
childData:""
}
},
methods: {
changData(childData) { //獲取到的資料為，childData
this.childData = https://www.cnblogs.com/Z-Hyi/archive/2022/08/08/childData
}
}
}
</script>
<style>
</style>
HelloComp.vue
<template>
<div>
<h1>{{msg}}</h1>
<button @click="sendData">傳遞資料</button>
</div>
</template>
<script>
export default {
props:['msg'], //父級定義的屬性
data ()
{
return {
childData: "I'm Child"
}
},
methods: {
sendData() {
this.$emit("myevent",this.childData) //emit方法就可以觸發父級組件的方法
}
}
}
</script>
<style>
</style>
非父子集傳遞資料
定義一個共享資料狀態來進行兄弟組件之間的“值”的傳遞
我們創建一個了兩個組件 Brother.vue、Sister.vue,他們兩個是同級的關系，都被引入了App.vue中使用，同時創建一個store.js檔案來共享資料狀態
- 首先，我們創建好組件，并在App.vue中進行參考和注冊
<template>
<div id="app">
<BrotherCon></BrotherCon>
<SisterCon></SisterCon>
</div>
</template>
<script>
import BrotherCon from "@/components/BrotherCon.vue"
import SisterCon from "@/components/SisterCon.vue"
export default {
components:{
BrotherCon,
SisterCon
},
data() {
return{
}
}
}
</script>
<style>
</style>
- 創建store.js
export default {
//狀態
state: {
message:"hello vue"
},
setStateMessage(str) {
this.state.message = str
}
}
- 在Brother.vue、Sister.vue參考store.js檔案，就可以直接獲取資料了
Brother.vue
<div>
<h1>Brother</h1>
<!-- 這里的state其實就是下面data中的store.state -->
<p>{{state.message}}</p>
</div>
</template>
<script>
import store from "../store"
export default {
data() {
return {
state:store.state
}
}
}
</script>
Sister.vue
<template>
<div>
<h1>Sister</h1>
<!-- 這里的state其實就是下面data中的store.state -->
<p>{{state.message}}</p>
</div>
</template>
<script>
import store from "../store"
export default {
data() {
return {
state:store.state
}
}
}
</script>
在App.vue中參考并注冊
<template>
<div id="app">
<BrotherCon></BrotherCon>
<SisterCon></SisterCon>
</div>
</template>
<script>
import BrotherCon from "@/components/BrotherCon.vue"
import SisterCon from "@/components/SisterCon.vue"
export default {
components:{
BrotherCon,
SisterCon
},
data() {
return{
}
}
}
</script>
<style>
</style>
結果展示
- 傳遞事件，比如在Brother中點擊一個按鈕，就可以改變sister中的資料
我們在Brother添加一個按鈕，并定義事件，點擊后改變他們共享的store中的state.message中的值
<template>
<div>
<h1>Brother</h1>
<!-- 這里的state其實就是下面data中的store.state -->
<p>{{state.message}}</p>
<button @click="changDate">改變資料</button>
</div>
</template>
<script>
import store from "../store"
export default {
data() {
return {
state:store.state
}
},
methods: {
changeDate(){
store.setStateMessage("brother data") //這里的store值得就是我們引入的那個
}
}
}
</script>
展示效果:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501272.html
標籤：其他