我們在開發中，會自定義大量的組件，我們應該如何在兩個組件之間進行“值”的傳遞呢？ 父子組件傳值 我們使用上一文中App.vue和HelloComp.vue組件來舉例 首先我們還是需要在APP.vue中引入HelloComp.vue <template> <div id="app"> <hello-c ...
我們在開發中，會自定義大量的組件，我們應該如何在兩個組件之間進行“值”的傳遞呢？
父子組件傳值
我們使用上一文中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=childData來將父組件中的變數複製，這時父組件中就獲得了子組件的值
methods: {
changData(childData) {
this.childData = 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 = 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>
展示效果:
