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存储变量

 

 

 

转载于:https://www.cnblogs.com/sharealex/articles/9945279.html