Vue组件通信
1、使用原生方法
下面这个例子,是父组件调用子组件,并向子组件传递一个参数,并通知子组件执行一个方法。在子组件中,接收到传来的参数,并执行父组件通知要做的方法,还可以通知父组件执行他的方法。
父组件:
<template>
<MapType ref="base_layer" @selectMapType='switchBaseMap' layer='layerA'></MapType>
</template>
<script>
import MapType from "../components/MapType";
export default {
components: {
MapType
},
mounted: function() {
this.$refs.base_layer.setType('layerB');//通知子组件
},
methods: {
switchBaseMap(type) { {
console.log(type);//输出'layerC'
}
}
}
</script>
子组件mapType.vue:
<script> export default { props: ["layer"],//接收prop mounted() { console.log(this.layer);//读取prop,输出'layerA' }, methods: { setType(type) { console.log(type);//输出'layerB' this.$emit("selectMapType",'layerC');//通知父组件 } } } </script>
2、使用vue-router
父组件:通过带参数的链接<router-link to='/001'></router-link>,或者使用this.$router.push('001'),向子组件传递参数。
子组件:通过this.$route.params.id获取到001。
3、使用vuex存储变量