当前位置:首页 » 《随便一记》 » 正文

前端开发:组件之间的传值(父传子、子传父、兄弟组件之间传值)的使用_软贱开发攻城狮

19 人参与  2022年01月11日 18:14  分类 : 《随便一记》  评论

点击全文阅读


前言

在前端开发的时候,处理数据、传递数据是非常常用的操作方式,也是前端开发工作中非常重要的部分。尤其是在前端开发过程中的组件之间的数据传递,是必用操作。那么本篇博文就来分享一下在前端开发的时候,对于在使用组件的时候进行数据传递处理的操作使用。

首先来了解一下在前端Vue开发过程中常用的组件之间的传值场景,有三种:父组件传值到子组件、子组件传值到父组件、兄弟组件之间的传值。其他延伸的组件之间的传值场景:孙子组件传值给爷爷组件、祖父组件传值给曾孙组件等等隔代关系传值,这些跨三级以上的组件的传值延伸情景,其实还是常用的三种传值的结合使用,这里就不再多说,只要掌握常用的三种传值方式就可应对各种变种延伸的情景。

一、父组件传值到子组件

通过父组件传值到子组件,其实就是把父组件的数据传递到子组件中并进行对应的业务操作,因为父组件中的数据如果不通过数据传值操作子组件是无法直接使用的。具体的父组件传值到子组件的使用如下所示:

定义一个数据源:fruits:[“Apple”,”Banana”,”Cherry”];  //把这个数组的数据从父组件传递到子组件中

1、父组件的写法

<template>

  <div id="app">

    <users v-bind:fruits="fruits”></users>  //前一个自定义名称便于子组件调用,后面的是要传递数据名,这里的v-bind可以省略不写

  </div>

</template>

<script>

import Fruits from "./components/Fruits”

export default {

  name: 'App',

  data(){

    return{

      fruits:[“Apple”,”Banana”,”Cherry”];

    }

  },

  components:{

    "fruits":Fruits

  }

}

2、子组件的写法

<template>

  <div class=“son”>

    <ul>

      <li v-for="fruit in fruits">{{ fruit }}</li>//遍历传递过来的值,然后呈现到页面

    </ul>

  </div>

</template>

<script>

export default {

  name: ’son’,

  props:{

    fruits:{           //这就是父组件中标签自定义的名字

      type:Array,

      required:true

    }

  }

}

</script>

 

 

3、总结

父组件通过props给子组件传值的(组件中的数据有三种:data、props、computed)。

 

二、子组件传值到父组件

子组件传值到父组件,其实就是把子组件中需要修改父组件传递过来的数据以及操作更新,回传给父组件,让父组件改变原始数据。具体的子组件传值到父组件的使用如下所示:

在子组件中通过点击事件的形式来向父组件传递需要改变的值,然后让父组件进行对应的修改。

1、子组件的写法

<template>

  <header>

    <h1 @click="changeValue”>{{title}}</h1>  //在标签上面绑定一个点击事件

  </header>

</template>

<script>

export default {

  name: ‘son’,

  data() {

    return {

      title:”test test test”

    }

  },

  methods:{

    changeValue() {

      this.$emit(“valueChanged", “hello world”); //自定义事件, 通过$emit传递的值“hello world”给父组件

    }

  }

}

</script>

2、父组件的写法

<template>

  <div id="app">

    <Son :valueChanged="updateValue” ></Son> //与子组件valueChanged自定义事件保持一致

    <h2>{{title}}</h2> //把父组件的title的值由“123”改为“hello world”

  </div>

</template>

<script>

import Son from "./components/Son”

export default {

  name: 'App',

  data(){

    return{

      title:”123”

    }

  },

 components:{

   Son

  },

  methods:{

    updateValue(value){   //在父组件中声明这个函数

      this.title = value;

    }

  },

}

</script>

 

 

 

3、总结

子组件通过$emit把数据传递到父组件中,也就是子组件把自己的数据发送到父组件中。

三、兄弟组件之间传值

兄弟组件之间传值,其实就是同级的两个组件之间的数据传递,比如子组件A 把当前数据传递给子组件B中。兄弟组件之间的传值有两种方式:第一种就是通过以同级的父组件为中转,第二种就是通过Bus中央事件总线。具体的兄弟组件之间传值的使用如下所示:

1、兄弟组件之间的传值可以通过同一级的父组件做为中转,如下所示:

<div> //父组件C

    <A></A>    //子组件A

    <B></B> //子组件B

</div>

      子组件A要向子组件B传值: 可以通过子组件A用$emit传给父组件C、父组件C使用props把子组件A的值传给子组件B中,也就是使用父组件做中转,原理就是把上面的父组件传值到子组件、子组件传值到父组件结合起来使用,这里就不再举具体的例子。

2、兄弟组件之间的传值还可以通Bus中央事件总线

(1)Bus.js文件:

import Vue from 'vue'

export default new Vue;

(2)父组件写法:

<div> //父组件C

    <A></A>    //子组件A

    <B></B> //子组件B

</div>

(3)子组件A

<button @click="aaa">传值</button> //点击按钮向子组件B传值

import Bus from "../api/Bus";   //引入bus

export default {

  data() {

    return {

      aa: 100

    };

  },

  methods: {

    aaa() {

      Bus.$emit("bbb", this.aa++, “子组件A向子组件B传值”);    //储存 Bus.$emit

    }

  }

};

(4)子组件B

<span>{{dd}}</span>

import Bus from "../api/Bus";

export default {

  data() {

    return {

      dd: "",

    };

  },

  created() {

    Bus.$on("bbb", (val) => {    //获取 Bus.$on

      this.dd= val;

    });

  }

};

3、总结

兄弟组件之间传值与父子组件之间的传值,其实和子组件向父组件传值有些类似,其实它们的通信原理都是相同的。使用Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求稍微简单的项目,如果有更复杂的情况,需要使用状态管理模式Vuex来进行处理。

最后

经过上文的内容可以完全掌握在前端开发过程中组件通信传值相关的知识点,读完本篇文章就可以完全学会,尤其是刚入门的开发者,更应该好好掌握上面的知识点,这里就不再赘述。

以上就是本章的全部内容,欢迎关注三掌柜的


点击全文阅读


本文链接:http://zhangshiyu.com/post/33057.html

组件  传递  数据  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 京圈佛子破戒后,我改嫁京圈纨绔(沈墨渊,白晶晶)
  • 前世被闺蜜害死,重生后我让她从太子妃变疯女苏婉儿,清歌完本_前世被闺蜜害死,重生后我让她从太子妃变疯女(苏婉儿,清歌)
  • 全书浏览七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)_七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)全书结局
  • 今天也没变成昨天(周扬陈默)全书免费_(周扬陈默)今天也没变成昨天后续(周扬陈默)
  • 重生后,秦总非要父以子贵(许沐晴,秦越泽)全书浏览_重生后,秦总非要父以子贵全书浏览
  • 他嫌弃我喝两块钱豆浆上不了台面,我结婚后他又哭又闹全书万照,白青青在线
  • 昭然若梦前尘烬列表_昭然若梦前尘烬(温昭然方池雲)
  • 导师借我股票账号,我倒欠五十万(孟潇潇,宁薇)_导师借我股票账号,我倒欠五十万孟潇潇,宁薇
  • 拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾(周钰泽,蒋清清,思源)全书浏览_拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾全书浏览
  • 我的人生,你已出局(程森凌古楚文)_我的人生,你已出局程森凌古楚文
  • 穿书成病娇女配,睁眼就签下离婚协议书(朱楼)_穿书成病娇女配,睁眼就签下离婚协议书
  • 老婆逼我给白月光捐肾,我死后她悔疯了(宋逸晨沈墨白)全书浏览_老婆逼我给白月光捐肾,我死后她悔疯了全书浏览

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1