一、父元件向子元件傳值

通過props來實現，子元件通過props來接收父元件傳過來的值！

1、邏輯梳理

父元件中：

第一步:引入子元件；

1 import sonShow from '@/component/son.vue';

第二步:在components中對子元件進行註冊；

1 components: {
2     sonShow
3 },
4                 

第三步:以標籤的形式載入；通過資料繫結的形式進行傳值~

1 <son-show :reciveUserInfo="userInfo"></son-show>

子元件中：

通過props接收父元件中傳過來的值；

1 props:["reciveUserInfo"],

2、程式碼展示

父元件index.vue

 1 <template>
 2     <view class="content">
 3         <son-show :reciveUserInfo="userInfo"></son-show>
 4     </view>
 5 </template>
 6  
 7 <script>
 8     import sonShow from '../../component/son.vue';
 9     export default
 
 {
10         components: {
11             sonShow
12         },
13         data() {
14             return {
15                 userInfo: [{
16                         "userName": "kaliwo",
17                         "age": "19"
18                     },
19                     {
20                         "userName": "lihuahua",
 
21                         "age": "39"
22                     }
23                 ]
24             }
25         }
26     }
27 </script>

子元件son.vue

 1 <template>
 2     <view class="">
 3         <block  v-for="(item,index) in reciveUserInfo" :key="index">
 4             <view class="mesg">
 5                 <text>{{item.userName}}</text>
 6                 <text>{{item.age}}</text>
 7             </view>
 8         </block>
 9     </view>
10 </template>
11  
12 <script>
13     export default{
14         props:["reciveUserInfo"],
15     }
16 </script>
17 <style>
18     .mesg{
19         display: flex;
20         flex-direction: column;
21         align-items: center;
22     }
23 </style>
24  
25  

3、結果

四、說明

對於一些詳情頁，比如有時我們需要點贊數量+1，-1的效果；但是，由於子元件不能改變父元件的值，所以直接操作從父元件接收的值進行更改是沒有效果的！就像如下：

1      let list = that.reciveUserInfo;
2         for(var i in list){
3         let tempAge = list[i].age + 1;
4         list[i].age = tempAge;
5         that.reciveUserInfo = list;
6     }

年齡還是沒有改變。所以應該怎麼做了？

把從父元件接收到的值reciveUserInfo賦給一個新的變數mesgShow，對這個新的變數進行操作，然後用對齊進行渲染即可！

1 let list = that.reciveUserInfo;
2     for(var i in list){
3        let tempAge = list[i].age + 1;
4        list[i].age = tempAge;
5        that.mesgShow = list;
6 }

附加：改變的程式碼：

二、子元件向父元件傳值

父元件index.vue 在父類引用標籤上寫上在子類$emit裡面定義的方法名:send, 以及接收方法

 1 <template>
 2     <view class="content">
 3         <son-show @send="getSonValue"></son-show>
 4     </view>
 5 </template>
 6  
 7 <script>
 8     import sonShow from '../../component/son.vue';
 9     export default {
10         components: {
11             sonShow
12         },
13         methods:{
14             getSonValue: function(res){
15                 console.log("res=========",res)
16             }
17         }
18     }
19 </script>

子元件；

 1 <template>
 2     <view class="" @click="sendMegToIndex">
 3         點我向父元件傳值
 4     </view>
 5 </template>
 6  
 7 <script>
 8     export default{
 9         methods:{
10             sendMegToIndex: function(){
11                 // 向父元件傳值  第一個引數是方法名：send   第二個引數是傳遞的值：我是來自子元件的值
12                 this.$emit("send","我來自子元件")
13             }
14         }
15     }
16     
17 </script>
18  
19  

三. 兄弟元件傳值

定義一個eventBus.js檔案，匯出一個空的vue物件，在兄弟元件中引入bus.js的檔案，在A元件通過bus.e m i t ( ) 傳 遞 ， 在 B 組 件 中 的 c r e a t e d 函 數 中 ，

使 用 b u s . emit()傳遞，在B元件中的created函式中，使用bus.emit()傳遞，在B組件中的created函數中，使用bus.on接受

根元件如下：

 1 <template>
 2   <div id="app">
 3     <ChildA/>
 4     <ChildB/>
 5   </div>
 6 </template>
 7 
 8 <script>
 9   import ChildA from './components/ChildA' // 匯入A元件
10   import ChildB from './components/ChildB' // 匯入B元件
11 
12   export default {
13     name: 'App',
14     components: {ChildA, ChildB} // 註冊A、B元件
15   }
16 </script>

兄弟A元件如下:

 1 <template>
 2   <div id="childA">
 3     <h1>我是A元件</h1>
 4     <button @click="transform">點我讓B元件接收到資料</button>
 5     <p>因為你點了B，所以我的資訊發生了變化：{{BMessage}}</p>
 6   </div>
 7 </template>
 8 
 9 <script>
10   export default {
11     data() {
12       return {
13         AMessage: 'Hello，B元件，我是A元件'
14       }
15     },
16     computed: {
17       BMessage() {
18         // 這裡儲存從store裡獲取的B元件的資料
19         return this.$store.state.BMsg
20       }
21     },
22     methods: {
23       transform() {
24         // 觸發receiveAMsg，將A元件的資料存放到store裡去
25         this.$store.commit('receiveAMsg', {
26           AMsg: this.AMessage
27         })
28       }
29     }
30   }
31 </script>

兄弟B元件如下

 1 <template>
 2   <div id="childB">
 3     <h1>我是B元件</h1>
 4     <button @click="transform">點我讓A元件接收到資料</button>
 5     <p>因為你點了A，所以我的資訊發生了變化：{{AMessage}}</p>
 6   </div>
 7 </template>
 8 
 9 <script>
10   export default {
11     data() {
12       return {
13         BMessage: 'Hello，A元件，我是B元件'
14       }
15     },
16     computed: {
17       AMessage() {
18         // 這裡儲存從store裡獲取的A元件的資料
19         return this.$store.state.AMsg
20       }
21     },
22     methods: {
23       transform() {
24         // 觸發receiveBMsg，將B元件的資料存放到store裡去
25         this.$store.commit('receiveBMsg', {
26           BMsg: this.BMessage
27         })
28       }
29     }
30   }
31 </script>

四. 通過vuex來實現元件傳值

在src中新建一個store資料夾，在資料夾中新建一個 index.js 檔案

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 Vue.use(Vuex)
 4 const state = {
 5   // 初始化A和B元件的資料，等待獲取
 6   AMsg: '',
 7   BMsg: ''
 8 }
 9 
10 const mutations = {
11   receiveAMsg(state, payload) {
12     // 將A元件的資料存放於state
13     state.AMsg = payload.AMsg
14   },
15   receiveBMsg(state, payload) {
16     // 將B元件的資料存放於state
17     state.BMsg = payload.BMsg
18   }
19 }
20 
21 export default new Vuex.Store({
22   state,
23   mutations
24 })