vue 父子組件傳值，兄弟組件傳值

父子組件中的傳值

父向子    v-bind props

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

子組件:
<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 [];
      }
    },

}

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

這是我上次想修改父組件的值遇到的報錯:

 

子向父  v-on $emit

子組件:
<button @click="cyy">按鈕</button>
methods: { cyy() { this.$emit("zifu", "子組件向父組件傳值", true); } } 父組件: <router v-on:zifu="hehe"></router> methods: { hehe: function(data, data2) { console.log(data, data2); } }

兄弟組件中的傳值

第一個辦法:父組件中轉

<div> //爸爸A
    <router></router>    //哥哥A1
    <vuex></vuex>　　　　//弟弟A2
</div>

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

使用父組件做中轉 這里不舉例了只是把上面的子向父，父向子連起來用

第二個方法:Bus中央事件總線

新建一個Bus.js 頁面

父組件組件代碼:

<div> //爸爸A
    <router></router>    //哥哥A1
    <vuex></vuex>　　　　//弟弟A2
</div>

 哥哥A1組件:

<button @click="cyy">按鈕</button> 點擊按鈕向弟弟A2傳值
腳本中:

import Bus from "../api/Bus";   //注意引入
export default {  data() { return { a: 1 }; }, methods: { cyy() { Bus.$emit("zifu", this.a++, "子組件向兄弟組件傳值"); //存 Bus.$emit } } };

弟弟A2組件:

<p>接受兄弟A1傳值=-------第{{ccc}}次,向{{ddd}}</p>
腳本中:

import Bus from "../api/Bus";
export default { data() { return { ccc: "", ddd: "" }; }, created() { Bus.$on("zifu", (val, val1) => { //取 Bus.$on this.ccc = val; this.ddd = val1; }); } };

傳值就告一段落了~~~~~~~~~~~~by~~~