• 父組件 傳值給 子組件
• 子組件 傳值給 父組件
• 組件 間的互相傳值

父組件傳值給子組件，主要通過組件自定義props屬性來完成，通過此屬性用來接收來自父組件傳遞的數據，props的值可以是兩種，一種是字符串數組；另一種是對象，props 中聲明的數據與組件data 函數return 的數據主要區别就是props 的來自父級，而data 中的是組件自己的數據，作用域是組件本身，這兩種數據都可以在模闆template 及計算屬性computed和方法methods 中使用

• 父組件 parent.vue 文件

<template> <div class="parent-container"> 父組件傳遞的值：{{ msg }} <!-- 通過自定義屬性的方式，完成父組件中的數據傳遞給子組件使用 --> <Child :msgFromParent="msg"></Child> </div> </template> <script> import Child from "./Child.vue" export default { data() { return { msg: "parent data" } }, components: { Child } }; </script> <style scoped> .parent-container { width: 500px; height: 100px; background-color: rgb(235, 138, 138); color: #fff; font-size: 24px; text-align: center; } </style>

• 子組件 Child.vue 文件

<template> <div class="child-container"> 接收父組件傳遞的值：{{ msgFromParent }} </div> </template> <script> export default { // 接受父組件傳遞的數據 props: ["msgFromParent"] } </script> <style scoped> </style>

Vue 中對 $emit 定義為:vm.$emit( eventName, […args] )

參數：{string} eventName[...args]觸發當前實例上的事件。附加參數都會傳給監聽器回調

子組件傳值給父組件，主要通過自定義事件$emit來完成 ，$emit第一個參數為自定義事件，第二個參數為要傳遞給父組件的值，父組件在子組件上綁定自定義事件來接收子組件傳遞的數據

---

• 父組件 parent.vue 文件

<template> <div class="parent-container"> 子組件傳遞的值：{{ info }} // 給子組件綁定自定義事件來接收子組件傳遞的數據 <Child @getInfo="getData"></Child> </div> </template> <script> import Child from "./Child.vue"; export default { data() { return { info: "", }; }, components: { Child, }, methods: { getData(info) { this.info = info; }, }, }; </script> <style scoped> </style>

• 子組件 Child.vue 文件

<template> <div class="child-container"> 子組件傳遞數據：{{ info }} // 點擊向父組件傳遞數據 <p><button @click="sendParent">點擊向父組件傳遞數據</button></p> </div> </template> <script> export default { data() { return { info: "child data", }; }, methods: { // 子組件通過$emit觸發自定義事件給父組件傳值 sendParent() { this.$emit("getInfo", this.info); }, }, }; </script> <style scoped> </style>

---

3.組件間互相傳值

Vue 中可以通過一個中間組件 (專門用于數據傳遞：事件中心) 完成數據的傳遞，如圖：

事件中心.png

---

• 事件中心 ：vm.js

// 引入 Vue import Vue from "vue" // 創建一個 Vue 實例對象，專門用于生成實例 const vm = new Vue({}) // 對外暴露實例 export default vm

• 組件 A.vue 文件

<template> <div class="a-container"> A組件向B組件傳遞數據：{{ msg }} <br /> A組件接收B組件傳遞數據：{{ info }} <p><button @click="sendToB">點擊向B組件發送數據</button></p> </div> </template> <script> // 引入事件中心 vm import vm from "../utils/vm.js"; export default { data() { return { msg: "A data", info: "" }; }, methods: { // 觸發自定義事件發送數據給B組件 sendToB() { vm.$emit("A-event", this.msg); }, getData() { // 監聽B-event事件是否發生 vm.$on("B-event", (dat) => { this.info = dat; }); }, }, created() { // 當組件實例一旦創建，監聽其他組件是否給自己發送消息 this.getData(); }, }; </script> <style scoped> </style>

• 組件 B.vue 文件

<template> <div class="b-container"> B組件向A組件傳遞數據：{{ info }} <br /> B組件接收A組件傳遞數據：{{ msg }} <p><button @click="sendToA">點擊向A組件發送數據</button></p> </div> </template> <script> import vm from "../utils/vm.js"; export default { data() { return { info: "B data", msg: "" }; }, methods: { sendToA() { vm.$emit("B-event", this.info); }, getData() { vm.$on("A-event", (dat) => { this.msg = dat; }); }, }, created() { this.getData(); }, }; </script> <style scoped> </style>

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部