详细聊聊vue组件是如何实现组件通讯的

目录
  • 前言
  • 如何解决组件之间通讯呢?
    • 解决方案:
  • 父传子
    • 实现过程:
    • 原理图示
    • 父组件 Footer.vue
    • 子组件 MyCon.vue
  • 小案例 采用了父传子
    • 父组件 App.vue
    • 子组件 MyProduct.vue
    • 效果展示
  • 子传父
    • 实现过程
    • 原理图示
    • 父组件 App.vue
    • 子组件 MyCon.vue
  • 商品案例 运用了子传父
    • 父组件 App.vue
    • 子组件 MyProduct.vue
    • 效果展示
  • 总结

前言

每一个组件中的变量和数据都是独立的,如果别的组件想要访问另一个组件里的数据该怎么做?

如何解决组件之间通讯呢?

解决方案:

可以采用父组件传数据给子组件,还可以子组件传数据给父组件。简称父传子,子传父。

下面详细说说父组件是如何将数据传给子组件的。

父传子

理论:如果一个组件A引入并使用了另一个组件B时,那么组件A就是父组件,组件B就是子组件。

实现过程:

1.在父组件中引入子组件、注册子组件、使用子组件  
   2.在父组件中的子组件标签上自定义一个属性 左边是定义的名称,右边是父组件中的数据 例如
   <MyCon :list="list" />
   3.在子组件中用prpos接收父组件传来的数据 例如:prpos:['list']  注意这里面的名称必须要和父组件
   定义的名称一致才能可以。

原理图示

父组件 Footer.vue

在父组件中的子组件标签上自定义一个属性

<template>
  <div>
    <h1>父组件传子组件</h1>
    <!-- 使用组件   自定义属性 -->
    <MyCon :name="name" :age="age" />
  </div>
</template>
<script>
// 引入组件 --> 创建组件 -->  使用组件
// 引入组件
import MyCon from "./MyCon.vue";
export default {
   //  创建组件
  components: { MyCon },
  // 数据
  data() {
    return {
      name: "张三",
      age: 38,
    };
  },
};
</script>

子组件 MyCon.vue

在子组件中用prpos接收父组件传来的数据

<template>
  <div>
    <h2>子组件</h2>
     // 直接在标签中使用
    <p>{{ name }} {{ age }}</p>
    <button @click="fn">点击修改props的值</button>
  </div>
</template>
<script>
export default {
  // 子组件接收父组件传来的数据
  props: ["name", "age"],
  methods: {
    fn() {
      this.name = "傻逼谭磊";
      this.age = 20
    },
  },
};
</script>

小案例 采用了父传子

父组件 App.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1>父组件</h1>
    <!-- 1. 父传。自定义属性 -->
    <MyProduct
      v-for="item in list"
      :key="item.id"
      :price="item.proprice"
      :info="item.info"
      :goodname="item.proname"
    />
  </div>
</template>

<script>
// 导入->注册->使用
import MyProduct from "./MyProduct.vue";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  components: { MyProduct },
};
</script>

<style>
</style>   

子组件 MyProduct.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h2>标题: {{ goodname }}</h2>
    <p>价格: {{ price }}元</p>
    <p>{{ info }}</p>
  </div>
</template>

<script>
export default {
  props: ["goodname", "price", "info"],
};
</script>

<style>
</style>

效果展示

子传父

实现过程

1.在父组件中引入子组件、注册子组件、使用子组件  
     2.在父组件的子组件标签上加一个事件监听 例如:  <MyCon @abc="fn" />
     3.在子组件中触发这个自定义的监听事件。例如:this.$emit("abc",参数)

原理图示

父组件 App.vue

在父组件的子组件标签上加一个事件监听 用形参接收数据

<template>
  <div>
    <h1>父组件</h1>
    <!-- 1.添加事件监听 -->
    <!-- 当子组件发生了abc事件要执行fn函数 -->
    <MyCon @abc="fn" />
  </div>
</template>
<script>
// 引入子组件
import MyCon from "./MyCon.vue";
export default {
  methods: {
  // 形参接收
    fn(obj) {
      // 打印查看有没有获取到
      console.log("fn发生了abc事件", obj);
    },
  },
  components: { MyCon },
};
</script>

子组件 MyCon.vue

在子组件中触发这个自定义的监听事件

<template>
  <div>
    <h2>子组件</h2>
    <button @click="ConFn">子传父</button>
  </div>
</template>
<script>
export default {
  methods: {
    ConFn() {
      console.log("子组件click");
      // 2.触发abc事件
      this.$emit("abc", { name: "吊毛谭磊" });
    },
  },
};
</script>

商品案例 运用了子传父

父组件 App.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1>父组件</h1>
    <!-- 1. 父传。自定义属性 -->
    <!-- 添加自定义事件 -->
    <MyProduct
      v-for="(item, idx) in list"
      :idx="idx"
      :key="item.id"
      :price="item.proprice"
      :info="item.info"
      :goodname="item.proname"
      @pdd="fn"
    />
  </div>
</template>

<script>
// 导入->注册->使用
import MyProduct from "./MyProduct.vue";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  components: { MyProduct },
  methods: {
    fn(obj) {
      console.log("父组件,收到了pdd事件", obj);
      // 计算砍了几元 相减  再进行重新赋值
      this.list[obj.idx].proprice -= obj.ran;
    },
  },
};
</script>

<style>
</style>

子组件 MyProduct.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h2>标题: {{ goodname }}</h2>
    <p>价格: {{ price }}元</p>
    <p>{{ info }}</p>
    <button @click="bargain">随机砍价</button>
  </div>
</template>

<script>
export default {
  // 子接收
  props: ["goodname", "price", "info", "idx"],
  methods: {
    bargain() {
      // 随机数字
      const ran = Math.ceil(Math.random() * 10);
      // 触发自定义事件
      // 为了知道具体是哪个商品要减少价格,所以要回传idx下标
      this.$emit("pdd", { idx: this.idx, ran });
    },
  },
};
</script>

<style>
</style>

效果展示

总结

到此这篇关于vue组件是如何实现组件通讯的文章就介绍到这了,更多相关vue实现组件通讯内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解vue组件通信的三种方式

    1. 第一种方式就是官方推荐的 官方推荐方式 有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu

  • 详解vue跨组件通信的几种方法

    在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了问题. props双向绑定 通过 sync 双向绑定,属性变化会同步到所有组件,这也是最简单的实现方式,缺点是属性会比较多.实现方式如下 App.vue 文件 <template> <div id="app"> <mask :hide-mask.sync="hideMask"></mask> <

  • vue 组件间的通信之子组件向父组件传值的方式

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就

  • Vue.js每天必学之组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

  • vue中组件通信的八种方式(值得收藏!)

    前言 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间

  • Vuejs第十篇之vuejs父子组件通信

    本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a

  • Vue 之孙组件向爷组件通信的实现

    如何把孙组件内特定的数据传给爷组件? 例如 把孙组件的名字传给爷组件并在爷组件上显示 思路 在孙组件被点击后 emit 事件 1 和孙组件的名字 在父组件上监听孙组件 emit 出的事件 1,再次 emit 事件 2 在爷组件上监听父组件 emit 出的事件 2,并触发处理函数 这个处理函数将父组件传出的子组件名字显示在父组件上 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> &

  • Vue3的7种种组件通信详情

    目录 1.Vue3 组件通信方式 2.Vue3 通信使用写法 2.1 props 2.2 $emit 2.3 expose / ref 2.4 attrs 2.5 v-model 2.6 provide / inject 2.7 Vuex 1.Vue3 组件通信方式 props $emit expose / ref $attrs v-model provide / inject Vuex 2.Vue3 通信使用写法 2.1 props 用 props 传数据给子组件有两种方法,如下 方法一:混合

  • 深入探讨Vue.js组件和组件通信

    基本是按照官网的 Guide 全部梳理了一遍:http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolist  Vue 实例 一个 Vue 应用是由一个 root vue instance 引导启动的,而 Vue instance 是这么创建的: var vm = new Vue({ // opti

  • JS组件系列之MVVM组件构建自己的Vue组件

    正文 前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博主都没什么太大的关系,博主还是老老实实研究自己的技术吧.技术之路还很长,且行且研究吧. 一.为什么组件很重要 前两天,看到一篇关于 汇总vue开源项目 的文章,资源非常丰富,不得不感叹开源社区的强大.随便点进去看了几个UI组件,基本都不是原生的html用法,如

  • vue组件编写之todolist组件实例详解

    我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>

  • 详解如何在vue项目中引入elementUI组件

    前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

  • 基于cropper.js封装vue实现在线图片裁剪组件功能

    效果图如下所示, github:demo下载 cropper.js github:cropper.js 官网(demo) cropper.js 安装 npm或bower安装 npm install cropper # or bower install cropper clone下载:下载地址 git clone https://github.com/fengyuanchen/cropper.git 引用cropper.js 主要引用cropper.js跟cropper.css两个文件 <scri

  • vue 使用高德地图vue-amap组件过程解析

    这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: '

  • vue移动端弹框组件的实例

    最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦! 一.npm 安装 // 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 npm install vue-layer-mobile@1.0.0 二.调整配置:因为这个组件中有woff,ttf,eto,

  • Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

    写在前面 首先,本篇文章所开发的组件并非一个已经开源的上线组件,所以如果你急于需要一个插件来只做你的项目,那么并不能带给你及时的帮助.这个组件的开发预计写两篇文章,一遍写组件,一篇写组件逻辑.这篇文章也是我自己开发的从无到有的过程,所以它可以为你提供一些Tree组件开发的思路,代码写到一定程度,不能完全依赖插件了,有时间可以看看插件源码或者动手去开发,这样真的能加深对技术的掌握程度. 开发过程 1.数据仓库-Vuex 2.组件的循环创建-递归组件 需求决定了我的技术选型,项目需求是一个中国各级政

  • 如何在Vue.JS中使用图标组件

    原文链接:https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30 本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读. 此文不包含字体图标和SVG sprite.仅在此讨论允许用户按需导入的图标系统. There are three major ways of exposing API of an icon component in Vue.js and each one of them has its

  • 封装Vue Element的table表格组件的示例详解

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • 基于Vue.js的表格分页组件

    一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-

随机推荐

其他