① vue 子父組件相互調用的方法 2018-11-09
以下內容只是我個人學習時的記錄，可能與實際有偏差，大佬勿怪
1傳值（父傳子）
父組件給子組件傳值 藉助 props
父組件：
傳一個叫做 put_child 的變數給子組件
子組件：
子組件在 props 中定義接受的變數，然後就能使用
2傳值（子傳父）
子組件給父組件傳值，通過 $emit
父組件：
在父組件中綁定一個屬性,同時定義一個方法接受，子組件發送過來的數據
子組件：
調用 $emit 傳給父組件上綁定的屬性，剩下的就是父組件處理了
3.調用方法(子調父)
目前只掌握了，同$emit傳值給父一樣,同上這里就不寫出了
4.調用方法(父用子)
父組件：
在父組件中 ref 屬性 定義一個變數，當我使用 this.$refs.變數 會把子組件對象返回，這樣我們就可以調用子組件的方法
② vue兄弟組件之間方法調用
方法一：
父組件 index.vue 中含有兩個兄弟組件 business.vue 及 detail.vue
當 business.vue中主協辦分配選擇完成後 需要刷新 detail.vue中的數據
在父組件中 的 business.vue組件上 定義觸發的方法 <business @updateDate='updateDate'></business>
在父組件中 的 detail.vue組件上 定義觸發的方法 < detail.vue ref='detail'></detail>
在兄弟組件中 主協辦分配選擇完成後showUserAssignData方法去觸發父組件 index.vue的updateDate方法
在父組件中 updateDate方法去觸發detail.vue組件中刷洗數據的方法
方法二：採用公共bus方法---js方法
第二個子組件需要調用第二個子組件方法
在main.js中 注冊一個公共實例並綁定到原型上
Vue.prototype.$bus = new Vue()
在第一個子組件中注冊一個方法 在created 或者mounted中注冊
在兄弟組件中觸發該方法
③ vue中父組件調用子組件的方法
方法一：通過ref直接調用子組件的方法；
方法二：通過$Children調用子組件方法(不推薦，獲取到的可能不是index對應的)
④ vue直接在父組件中調用子組件的方法
方法一：
//父組件中
引入子組件 然後點擊調用子組件方法
<template>
<div class="container">
<h1 @click="handleClick" style="text-align: center">Musxc</h1>
<LineChart ref="child" ></LineChart>
</div>
</template>
<script>
import LineChart from "../components/LineChart.vue";
export default {
components: {
LineChart,
},
methods: {
handleClick() {
this.$refs.child.sing();
},
},
};
</script>
//子組件中
我是子組件
export default {
methods: {
sing() {
console.log('我是子組件的方法');
},
},
};
成功的調用了子組件的方法
方法二：通過組件的$emit、$on方法；
//父組件中
點擊調用子組件方法
import Child from './child';
export default{ methods: { handleClick() { this.$refs.child.$emit("childmethod") //子組件$on中的名字 },
},
}//子組件中
我是子組件
export default {
mounted() {
this.$nextTick(function() {
this.$on('childmethods',function() {
console.log('我是子組件方法');
});
});
},
};