父向子 v-bind propsvue
<!-- 組件使用v-bind傳值 -->
<router :msg="msg"></router>
子組件: <p>子組件 ----- {{msg}}</p> props: ["msg"], //props接收
props:驗證 vuex
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 警告。api
這是我上次想修改父組件的值遇到的報錯:數組
子向父 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 ui
使用父組件作中轉 這裏不舉例了只是把上面的子向父,父向子連起來用this
<div> //爸爸A <router></router> //哥哥A1 <vuex></vuex> //弟弟A2 </div>
哥哥A1組件:spa
<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組件:code
<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~~~router