vue項目經常需要組件間的傳值以及方法調用，具體場景就不說了，都知道。基本上所有的傳值都可以用vuex狀態管理來實現，只要在組件內監聽vuex就好。
vue常用的傳值方式以及方法有：
1. 父值傳子（props）
1-1：解決一個項目中遇到的問題，父組件給子組件傳值第一次子組件是可以接受的，
但是在父組件中這個值改變了，在子組件中這個prop的值還是第一次父組件傳給的值。
2. 子值傳父（$emit） == 子調用父方法（$emit）：此方法較為常用。
3. 子調用父方法（props）== 子傳父值：此方法不常見。
4. 父主動獲取子方法以及數據（$refs）
5. 子主動獲取父方法以及數據：一種方法就是父先把值，方法通過props傳給子，然后子在用即可，此法同3。這里講另外方法一個方法。
6. 非父子 （eventBus）
7. vuex傳值
補充：父子組件的關系可以總結為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發數據，子組件通過事件給父組件發送消息，如下圖所示：
詳細示例：
1. 父組件向子組件進行傳值
父組件：
<template>
<div> 父組件: <input type="text" v-model="name">
<!-- 引入子組件 -->
<child :inputName="name"></child>
</div>
</template>
<script> import child from "./child"; export default { components: { child }, data() { return { name: "" }; } }; </script>
子組件：
<template>
<div> 子組件: <span>{{inputName}}</span>
</div>
</template>
<script> export default { // 接受父組件的值
props: { inputName: String, required: true } }; </script>
1-1：子組件接受props的值一次后，任父組件傳的值怎么變，子組件就不變了。
解決方法：用一個中間值，頁面綁定這個中間值。觀察props值得變化->變化后把新值賦值給中間值。這樣就同步了
<template>
<input type="text" v-model="currentValue" @change="change" />
</template>
<script>
export default {
data() {
return {
// 中間值來承接父組件傳過來的值
currentValue: this.value,
other:{},
};
},
props: {
value: {//父傳過來的值
type: String
}
},
watch: {
value(val) {
// value變換賦值給currentValue
this.currentValue = val;
},
other: {
//深度觀察對象
handler(val) {
},
deep: true
}
},
methods: {
}
};
</script>
2. 子組件向父組件傳值 -> 是通過方法傳遞的，也相當於子組件調用父組件方法。
父組件：
<template>
<div> 父組件: <span>{{name}}</span>
<!-- 引入子組件 定義一個on的方法監聽子組件的狀態-->
<child v-on:onChildByValue="childByValue"></child>
</div>
</template>
<script> import child from "./child"; export default { components: { child }, data() { return { name: "" }; }, methods: { childByValue: function(childValue) { // childValue就是子組件傳過來的值
this.name = childValue; } } }; </script>
子組件：
<template>
<div> 子組件: <span>{{childValue}}</span>
<!-- 定義一個子組件傳值的方法 -->
<input type="button" value="點擊觸發" @click="childClick">
</div>
</template>
<script> export default { data() { return { childValue: "我是子組件的數據" }; }, methods: { childClick() { // childByValue是在父組件on監聽的方法 // 第二個參數this.childValue是需要傳的值
this.$emit("onChildByValue", this.childValue); } } }; </script>
3. 子調用父方法：
父組件：
<template>
<editor :onSubmit="cccc"></editor>
</template>
<script> export default {
//省略了引入注冊等代碼 methods: { cccc: function (str) { alert(str) } } } </script>
子組件：
<template>
<button @click="submit">提交</button>
</template>
<script> export default { props: { onSubmit: {//父組件把方法傳過來 type: Function, default: null } }, methods: { submit: function () { if (this.onsubmit) {
// 調用父方法也相當於通過方法傳值了 this.onsubmit('傳給父組件ok') } } } } </script>
4. 父主動獲取子方法以及數據
1. 調用子組件的時候 定義一個ref
<child ref="headerChild"></child>
2. 在父組件里面通過
this.$refs.headerChild.屬性 this.$refs.headerChild.方法5. 子主動獲取父方法以及數據
在子組件里面通過以下方法獲取，獲取不到數據可以輸出this.$parent看看數據是什么樣的，有時候得通過this.$parent.$parent.屬性 ...
用此方法前提得知道父組件有沒有，如果有？是誰，不推薦用這個方法，如果組件嵌套過多就比較麻煩。
this.$parent.屬性 this.$parent.方法
6. 非父子組件進行傳值（不推薦平行組件相互傳值，能避免就避免）
a: 方法一：如果相互傳值的組件都公有一個父組件的話，共同父組件中設定一個data用於儲存你要傳遞的數據，
然后兩個子組件都通過props連接父組件的這個data，實現一個三方同步。
b: 方法二：通過url，緩存來傳數據，這個得看組件間怎么設計的。
c: 方法三：event bus，vue2.0里面的event bus(其實就是個發布訂閱模式)：
可以在main.js里面設置全局方法：window.eventBus = new Vue();
組件A：訂閱方法。
<template>
<div>
A組件:
<input type="button" value="點擊觸發" @click="getData">
<span>{{name}}</span>
</div>
</template>
<script>
export default {
data () {
return {
name: 0
}
},
methods: {
getData: function () {
this.name++
},
showLog: function (){
console.log('調用了A組件方法')
}
}
mounted: function () {
var that = this
// 用$on事件來接收
eventBus.$on('sendEvent', function(data){ // 在這里處理數據或者調用要執行的方法
console.log(data) that.name = data; that.showLog(); })
},
}
組件B：調用方法
<template>
<div>
B組件:
<span>{{elementValue}}</span>
<input type="button" value="點擊觸發" @click="elementByValue">
</div>
</template>
<script>
export default {
data() {
return {
elementValue: 4
};
},
methods: {
elementByValue: function() {
// 在這里觸發這個讓別的組件觀察的方法。
eventBus.$emit("sendEvent", this.elementValue);
}
}
};
</script>
7.vuex傳值：只需要在相應組件改變，以及監聽變化就可以。
<template>
<div>
<el-button @click="change">change</el-button>
{{this.$store.state.sendData}}
{{getSendData}}
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {
getSendData(){
return this.$store.state.sendData;
},
},
watch: {
//觀察數據變化，執行相應的方法
getSendData(val,oldval){
console.log(val);
},
},
methods: {
change(){
this.$store.commit("newSendData", this.$store.state.sendData+1);
}
},
mounted() {}
};
</script>
基本上所有的方法都在這里了，有問題可以留言。