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

 

 

 
posted @ 2018-11-12 11:00  付刚的博客  阅读(65)  评论(0编辑  收藏