父子元件中的傳值

1.方法一（官網標準）

父向子 v-bind props

<!-- 父元件使用v-bind傳值 -->
     <router :msg="msg"></router>

<!-- 子元件使用props接收值 -->
     <p>子元件 ----- {{msg}}</p> 

     props: ["msg"], //props接收

props:驗證

props: {
    // fooA只接受數值型別的引數
    fooA: Number,
    // fooB可以接受字串和數值型別的引數
    fooB: [String, Number],
    // fooC可以接受字串型別的引數，並且這個引數必須傳入
 

    msg: {
      type: String,
      required: true
    },
    // fooD接受數值型別的引數，如果不傳入的話預設就是100
    fooD: {
      type: Number,
      default: 100
    },
    // fooE接受物件型別的引數
    fooE: {
      type: Object,
      // 當為物件型別設定預設值時必須使用函式返回
      default: function() {
        return { message: "Hello, world" };
      }
    },
    // fooF使用一個自定義的驗證器
 

    fooF: {
      validator: function(value) {
        return value >= 0 && value <= 100;
      }
    },

　　fooG: {
      type:Array,
      // 當為陣列型別設定預設值時必須使用陣列返回
      default: function() {
        return [];
      }
    },

}
轉載地址來源：https://www.cnblogs.com/chen-yi-yi/p/11152391.html  （ 啾啾啾啾一口 
 
）

props 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。這是為了防止子元件修改父元件的狀態。所以不應該在子元件中修改 props 中的值。

子向父 v-on $emit

子元件:
<button @click="returnValue">按鈕</button>
　　methods: {
    　　returnValue() {
      　　this.$emit("zifu", "子元件向父元件傳值", true);
    　　}
  　　}

父元件:
<router  v-on:zifu="hehe"></router>
　　methods: {
   　　hehe: function(data, data2) {
     　　console.log(data, data2);
   　　}
　　}

2.方法二（父 =>子 包含關係）

父向子

<!-- 父元件使用在data中初始化 -->
data(){
    return {
      status: false
    }
  }

<!-- 子元件使用props接收值 -->

created: {     // 此處created是參考示例，也可以在mounted或其他能夠獲取this的任意一個週期
     let aa = this.$parent.status
}

子向父

this.$parent.status = true  // 修改父元件中status

兄弟元件中的傳值

1.方法一（通過父元件中轉傳值）

1.1 傳統模式

爸爸A元件：
<div>  //爸爸A
    <components11 @updateInfo="updateInfo11"></components11>    //哥哥A1
    <components22 :sendData="msg22"></components22>　　//弟弟A2
</div>

data () {
    return {
      msg22: '上海'，
    }
  },
 methods: {
    updateInfo11 (data) { // 點選子元件按鈕時觸發事件
      this.msg22 = data.city  // 改變了父元件的值
    }
  }
哥哥A1元件：
<button @click='select()'>點選子元件</button>

 methods: {
    select () {
      let data = {
        city: '杭州'
      }
      this.$emit('updateInfo11', data)  // select事件觸發後，自動觸發updateInfo事件
    }
  }

A1要向A2傳值 、 可以用$emit傳給A、A在使用v-bind傳給A2

1.2 provide/inject 子元件必須是有共同的父或長輩

父元件：

<components11 ref="LeftComponent" />  // 子元件

provide() {
    return {
      eventStatus: this
    }
  },
data() {
   return{

  }
}
子元件1：

data() {
  return {
    selected: 1
 }
}

子元件2：

<button @click='eventChange'>點選子元件2修改子元件1的引數</button>

inject: ['eventStatus'],
methods: {
eventChange(){
  　this.eventStatus.$refs.LeftComponent.selected = 2
　　　}
}

2.方法二（通過Vue狀態管理模式 Vuex）

首先，初始化store下index.js中的內容

import Vue from 'vue'
import Vuex from 'vuex'

//掛載Vuex
Vue.use(Vuex)

//建立VueX物件
const store = new Vuex.Store({
    state:{
        //存放的鍵值對就是所要管理的狀態
        name:'helloVueX'
    }
})

export default store

然後，將store掛載到當前專案的Vue例項當中去

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一樣，將我們建立的Vuex例項掛載到這個vue例項中
  render: h => h(App)
})

最後，使用vuex暫存的值

...,
methods:{
    add(){
      console.log(this.$store.state.name)
    }
},
...