菜单 搜索
首页 前端知识 Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)

Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)

2024-01-27 00:01:21 前端知识 前端哥 168 865 我要收藏

一、父传子、父传后代

方式一：子通过props来接收

image.png
父组件：父组件引入子组件时，通过<child :parentValue = "parentValue"></child>子组件传值。

备注：这种方式父传值很方便，但是传递给后代组件不推荐(父->子->孙),且这种方式父组件不能直接修改父组件传过来的数据。

<template>
  <div>
    <h1>父组件</h1>
    <child :parentValue = "parentValue"></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        parentValue:"父组件内的值"
      }
    }
  }
</script>
<style scoped>

</style>

子组件：子组件通过props即props:{ parentValue:{ type:String, default:"" } }来接收父组件传过来的值

<template>
  <div>
    <h2>子组件</h2>
    <hr>
    <span>{{parentValue}}</span>
  </div>
</template>

<script>
  export default {
    name: 'child',
    props:{
      parentValue:{
        type:String,
        default:""
      }
    },
    data () {
      return {
      }
    },
  }
</script>
<style scoped>

</style>

方式二：通过this.$parent.xxx子组件直接使用父组件的值

备注：这种方式，子组件可以直接修改父组件的数据。

image.png
父组件：正常引入子组件

<template>
  <div>
    <h1>父组件</h1>
    <child></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        parentValue:"父组件内的值"
      }
    }
  }
</script>

子组件：通过this.$parent.parentValue获取父组件的数据。

<template>
  <div>
    <h2>子组件</h2>
    <span>我是通过this.$parent.xxx直接获取父组件的值：</span>
    <br>
<!--    <span>{{this.$parent.parentValue}}</span>-->
    <span>{{parentValueToSon}}</span>
  </div>
</template>

<script>
  export default {
    name: 'child',
    data () {
      return {
        parentValueToSon:"",
      }
    },
    created() {
      this.parentValueToSon = this.$parent.parentValue;
    }
  }
</script>

方式三：依赖注入provide/inject

备注：这种方式父组件可以直接向某个后代组件传值，不用再一级一级的传递。

缺点：很难去找这个值是从哪个组件传递过来的。

image.png
父组件：通过provide定义需要传递给后代的数据。

<template>
  <div>
    <h1>父组件</h1>
    <hr>
    <child></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
      }
    },
    //通过依赖注入方式传递给后代的数据
    provide(){
      return{
        parentProvideValue:"依赖的父组件的值"
      }
    }
  }
</script>

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <span>我是通过this.$parent.xxx直接获取父组件的值：</span>
    <br>
    <!--<span>{{this.$parent.parentValue}}</span>-->
    <span>{{parentValueToSon}}</span>
    <hr>
    <grandson></grandson>
  </div>
</template>

孙子组件：通过inject注入爷爷辈组件传递过来的值。

<template>
  <div>
    <h3>孙子组件</h3>
    <span>获取到的爷爷辈组件传递过来的值：</span>
    <br>
    <span>{{parentProvideValue}}</span>
  </div>
</template>

<script>
  export default {
    name: 'grandson',
    //获取父组件传递过来的值
    inject:['parentProvideValue'],
    data () {
      return {
      }
    }
  }
</script>
<style scoped>

</style>

效果图：

image.png

二、子传父、后代传父

方式一：this.$emit(“function”,param)

子组件通过$emit传递一个函数和参数，父组件通过传递过来的函数接收参数即传过来的值。

父子组件一般会触发交互行为(子组件传递过来的值放在生命周期函数里是传不过来的)，所以可以通过父子的交互行为获取到子组件传递过来的数据。

image.png
父组件：通过子组件自定义的函数进行绑定接收传递过来的数据。

<template>
  <div>
    <h1>父组件</h1>
    <span>接收到子组件传递过来的值：</span>
    <span>{{getSonToParentValue}}</span>
    <hr>
    <child @tansToParent = "tansToParent"></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        getSonToParentValue:"",
      }
    },
    mounted() {
    },
    methods:{
      tansToParent(val) {
        this.getSonToParentValue = val;
        console.log("子组件传递过来的值",val)
      }
    }
  }
</script>

子组件：通过this. e m i t ( " f u n c t i o n " , p a r a m ) 子组件通过 emit("function",param) 子组件通过 emit("function",param)子组件通过emit传递一个函数和参数，父组件通过传递过来的函数接收参数即传过来的值。

<template>
  <div>
    <h2>子组件</h2>
    <button @click="toParentValue">子组件按钮</button>
    <hr>
    <grandson></grandson>
  </div>
</template>

<script>
  import Grandson from "./grandson";
  export default {
    name: 'child',
    components: {Grandson},
    data () {
      return {
        childValue:"子组件传递给父组件的值",
      }
    },
    created() {

    },
    methods:{
      toParentValue(){
        //通过this.$emit给父组件传值
        this.$emit('tansToParent',this.childValue)
      }
    }
  }
</script>

效果图：

image.png

方式二：this.$child.xxx直接获取子组件数据，且可直接修改子组件的数据。

父组件：this.$children[0].childValue获取子组件数据，只有一个子组件故下标为0.

<template>
  <div>
    <h1>父组件</h1>
    <span>接收到子组件传递过来的值：</span>
    <span>{{getSonToParentValue}}</span>
    <hr>
    <child></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        getSonToParentValue:"",
      }
    },
    mounted() {
      this.getSonToParentValue = this.$children[0].childValue
    }
  }
</script>

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <button>子组件按钮</button>
    <hr>
    <grandson></grandson>
  </div>
</template>

<script>
  import Grandson from "./grandson";
  export default {
    name: 'child',
    components: {Grandson},
    data () {
      return {
        childValue:"子组件传递给父组件的值",
      }
    },
    created() {

    },
    methods:{
    }
  }
</script>

方式三：通过ref/refs获取子组件dom从而直接获取子组件数据。可直接修改子组件数据。

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <span>接收到子组件传递过来的值：</span>
    <span>{{getSonToParentValue}}</span>
    <hr>
    <child ref="childDom"></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        getSonToParentValue:"",
      }
    },
    mounted() {
      this.getSonToParentValue = this.$refs.childDom.childValue
    }
  }
</script>

子组件与上述相同。

三、兄弟组件传值

方式一：通过中转eventBus.js工具类

新建一个中转eventBus.js工具类，传值的兄弟组件自定义一个函数通过

eventBus.$emit('function',参数);

给接收值的兄弟组件传一个约定好的function名称及参数(即传递的值)；接收值的兄弟组件通过

eventBus.$on('function',val=>{
  console.log("传递过来的值",val)
})

来接收传递过来的值。

image.png
eventBus.js:

import Vue from 'vue'
export default new Vue();

传值的兄弟组件：

<template>
  <div>
    <h2>子组件</h2>
    <button @click="toBrother">点击给兄弟组件传值</button>
  </div>
</template>

<script>
  import Grandson from "./grandson";
  import eventBus from "../utills/eventBus";
  export default {
    name: 'child',
    components: {Grandson},
    data () {
      return {
        transToBrother:"这是传递给兄弟组件的值",
      }
    },
    methods:{
      toBrother(){
        eventBus.$emit('toBrotherFunc',this.transToBrother);
      }
    }
  }
</script>

接收值的兄弟组件：

<template>
  <div>
    <h3>孙子组件</h3>
    <span>兄弟组件传递过来的值：</span>
    <span>{{eventBusValue}}</span>
  </div>
</template>

<script>
  import eventBus from "../utills/eventBus";
  export default {
    name: 'grandson',

    data () {
      return {
        eventBusValue:"",
      }
    },
    created() {
      eventBus.$on('toBrotherFunc',val=>{
        this.eventBusValue = val;
      })
    }
  }
</script>

效果图：
在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/497.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html jquery bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品

2024-02-06 15:02:03

html页面 通过jquery.i18n.properties添加多语言

2024-02-06 15:02:02

js打印及问题处理（CLodop/jquery.print.js）

2024-02-06 15:02:00

JavaScript请求数据的4种方法总结（Ajax、fetch、jQuery、axios）

2024-02-06 15:02:56

06-jquery函数

2024-02-06 15:02:47

初识 jQuery（JavaScript 框架）

2024-02-06 15:02:39

【JavaScript】jquery的导入方式有两种：本地导入和线上导入

2024-02-06 15:02:34

利用java将excle转换为json数据,详细代码以及实现流程,加入一些常见的业务判断

2024-02-06 15:02:24

学生管理界面实现（html与Java后端相连）后台应用Spring框架

2024-02-06 15:02:17

【数据可视化】-数据下钻

2024-02-06 15:02:16

大家推荐的文章
1

移动端css布局大全

2024-02-06 15:02:421000
2

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
3

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
4

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
5

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
6

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
7

使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？

2024-02-06 15:02:59995
8

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
9

Access-Control-Allow-Origin跨域解决及详细介绍

2024-02-03 12:02:13993
10

Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！