专栏首页前端开发随笔Vue兄弟组件传值

Vue兄弟组件传值

在src下新建个文件夹建个js,在这里我取名为VueEvent.js,在store文件夹下,在这个文件中实例化vue

import Vue from 'vue';
var VueEvent = new Vue()
export default VueEvent;

分别把它引入到tab.vue和home.vue中,注意它们有个共同的父组件

▼▼home.vue

<template>
  <div>
    <h2>{{title}}</h2>
    <button @click="gethome()">Submit</button>
  </div>
</template>

<script>
//引入 vue 实例
import VueEvent from "../store/VueEvent.js";
export default {
  data() {
    return {
      title: "我是home组件的数据"
    };
  },
  methods: {
    gethome() {
      //$emit广播数据		
      VueEvent.$emit("totab", this.title);
    }
  }
};
</script>

<style>
</style>

▼▼tab.vue

<template>
  <div>
  </div>
</template>

<script>
import VueEvent from "../store/VueEvent.js";
export default {
  data() {
    return {
    };
  },
  methods: {
  },
  mounted() {
  //$on接收数据
    VueEvent.$on('totab',function(data) {
      console.log(data);
    });
  }
};
</script>

<style>
</style>

在这里home向tab组件传title值,在父组件去触发事件

点击home的触发的事件可以看到是在tab中显示的,说明传值以及成功了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue_cli升级4.x版本搭建项目

    在这里配置项目需要的东西 项目空格为选中/取消 a为全选 i为反选 下面是我的项目配置

    wePanda
  • Vue Router配置参数、404页面

    wePanda
  • Js通过值获取索引下标

    wePanda
  • 如何将一个 Dubbo 项目改造成一个 Service Mesh 项目?

    本篇介绍如何将一个 Dubbo 项目改造成一个 SpringBoot + K8S + Istio 项目的全过程,实现了在不改变 Dubbo 项目整体代码结构的基...

    axlyzhang
  • 【技术创作101训练营】mock工具模拟接口联调

    社区的小伙伴,大家好,我是小两同学。我带来的分享主题是,mock工具模拟接口联调。

    俩小两
  • 京东信息安全月之SDL在路上

    信息安全月正在如火如荼开展,作为各项活动中的一个重要部分--“安全训练营·SDL在路上”,如期召开。来自京东物流、京东商城、京东云、CTO-信息安全部的各体系领...

    京东技术
  • [Vue 牛刀小试]:第一章 - 一些基础概念

      Vue、React、Angular,当今前端界的三驾马车,作为传统的后端程序员,前端再也不是我们想的那种切切图就可以了,第一次接触的话,先了解了解一些基础的...

    程序员宇说
  • Dubbo快速入门

    Apache Dubbo是一款高性能、轻量级的开源Java RPC框架,它提供了三大核心功能:

    故里
  • 从零开始构建 vue3

    2019年10月5日凌晨,Vue 的作者尤雨溪公布了 Vue3 的源代码。当然,它暂时还不是完整的 Vue3,而是 pre-alpha 版,只完成了一些核心功能...

    我是一条小青蛇
  • dubbo配置负载均衡、集群环境

    再用dubbo作为项目架构的时候,给consumer消费者用nginx提供了负载均衡策略和集群的实现,

    Arebirth

扫码关注云+社区

领取腾讯云代金券