粗谈Vue组件间的调用方法

不同组件间的调用方法

在Vue中，我们可以通过 $+refs、parent、children来进行组件间的访问，而只用refs就可以实现不同组件间的数据互通。

举个例子:

A组件(Map.vue)

<script>
export default {
  data() {
    return {
      markers: [
        {
          //人员一:
          lng: 118.939866,
          lat: 32.115661,
          icon: require("../assets/img/dot.png"),
          iconOn: require("../assets/img/dot-red.png"),
          number: "001",
          name: "admin",
          nameInfo: "admin[001]",
          eq: "adsdsfasf",
          area: "南京邮电大学仙林校区南一食堂",
          showFlag: false //flag放在每一条数据里
        },
        //人员二:
        {
          lng: 118.937295,
          lat: 32.112764,
          icon: require("../assets/img/dot.png"),
          iconOn: require("../assets/img/dot-red.png"),
          number: "002",
          name: "王小明",
          nameInfo: "王小明[002]",
          eq: "5345466",
          area: "南京邮电大学仙林校区图书馆",
          showFlag: false
        }
      ]
    }
  },
  methods: {
    infoWindowClose(marker) {
      marker.showFlag = false;
    },
    infoWindowOpen(marker) {
      marker.showFlag = true;
    }
  }
}
</script>

B组件(Path.vue)

<script>
import Map from "../components/Map"; //地图
export default {
  name: "PathQuery",
  components: {nowTime, Map},
  data() {
    return {
      formInline: {
        overall: "",
        region: "",
        person: ""
      },
      hoursTip: "AM"
    };
  },
  methods: {
    // 搜索
    onSubmit() {
      let flag = false; //判断员工是否找到
      //console.log(this.$refs.MAP.markers[0].name);
      /*Vue组件间的调用*/
      for (let i = 0; i < this.$refs.MAP.markers.length; i++) {
        if (this.$data.formInline.person == this.$refs.MAP.markers[i].name) {
          this.$refs.MAP.markers[i].showFlag = true;
          flag = true;
        }
      }
      if (!flag) {
        alert("未找到此员工!!!");
      }
    }
  }
}
</script>

上面两个例子组件中， 实现两组件间数据互通的核心代码为this.$refs.引入的A组件时定义的名字+希望调用A组件的元素

在使用这段代码之前，我们需要在B组件中先引入A组件

import Map from “A组件的地址”;

然后再在div中引入

<div>
      <Map ref="MAP"></Map>
</div>

注意div中的Map标签应与import后一致

这里ref后就是引入A组件时定义的名字，在后面B组件中的调用会使用到

到这一步，我们已经实现了在B组件中引入A组件，接下来就是B组件中的调用了

在A组件的data中有markers对象，所以，我们在B组件中，就可以通过this.$refs.MAP.markers[i]实现读取和修改A组件markers中的值

如读取markers中的name：this.$refs.MAP.markers[i].name

同一组件间的调用方法

说完了Vue组件间的数据互通，我再来聊聊Vue组件内部的数据调用

想必大家已经猜到了：

this.$data

这个就是实现组件内部信息读取的关键，通过this.$data 我们就可以对当前组件的data、methods等进行访问，并修改其中的数据了

同样举个例子：

在B组件中，我的data里有person，它存着一个值（和input进行了双向绑定），我想要在methods中读取它：

this.$data.formInline.person

以上是我对Vue组件间的调用方法的浅见，希望对大家有所帮助！