IT俱乐部 JavaScript Vue组件传值方式(props属性,父到子,子到父,兄弟传值)

Vue组件传值方式(props属性,父到子,子到父,兄弟传值)

前言

Vue是数据驱动视图更新的框架,平时写业务时,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要

提示:以下是本篇文章正文内容,下面案例可供参考

一、props是什么?

  • propsVue实例上的一个属性,用于组件的传值
  • 作用:为了接收外面传过来的数据,与data、methods等是一个级别的配置项。
  • props在子属性和父属性之间形成一个单向向下的绑定(单向数据流)
  • 当父属性更新时,它会向下流向子属性,但不会反过来。这可以防止子组件意外改变父组件的状态

使用规则

export default {
	//使用方式一
    props:["count"],
    //使用方式二
    props:{
        count:{
        	//type:类型规定
            type:Number,
            //default:默认值
            default:0,
            //require:是否是必传
            require:true,
        }
    },
}

二、父传子 props

实现步骤

  • 父传子通过 props实现
  • 父组件通过自定义变量传入子组件
  • 子组件利用props接收父组件值
  • 接收props不能修改,但是可以在组件中直接使用
  • 如果想要修改props,先把props赋值给其他变量,在进行修改

代码实现

//父组件

我是父组件

//第三步通过v-bind动态传入子组件
//第一步导入组件 import Child from "../child/index.vue" export default { //第二步组件注册 components:{ Child, }, data () { return { count: 1 } } }
//子组件

我是子组件

// 第二步在页面中使用
接收父组件传值:{{count}}
export default { //第一步利用 props 接收 //可以直接在页面中使用,但不可修改;修改需要先将 props 中的数据赋值给 data 中的变量 // props:["count"], props:{ count:{ type:Number, default:0, require:true, } }, }

效果展示

二.子传父 $emit

实现步骤

  • 子传父通过 $emit 实现
  • 在子组件中通过 $emit 方法传值给父组件
  • 在父页面中的子组件标签中自定义事件接收

代码实现

//子组件

我是子组件

export default { methods:{ give(){ //第一步调用 $emit 传递参数 //emit 中第一个参数是在父页面中接收的 事件名称 //emit 中第二个尝试是要传递的数据 this.$emit("child",`我是子组件值+ ${new Date().getTime()}`) } } }
// 父组件

我是父组件

我是接收子组件的值:{{this.childValue}}
// 第一步在子组件中自定义事件接收 emit 传递的事件
import Child from "../child/index.vue" export default { components:{ Child, }, data () { return { childValue:"", } }, methods:{ // 第二步在事件接收使用 子组件的传值 accept(obj){ this.childValue = obj } } }

效果展示

三.兄弟传值 EventBus

实现步骤

  • 兄弟之间传值通过 EventBus实现
  • 在components文件中新建一个 js 文件,页面中导入Vue实例,然后导出一个new Vue()
  • 在需要兄弟之间传值的组件中导入这个文件
  • 传值时通过导入的文件调用$emit 实现($emit(“事件名称”,需要传递的值))
  • 接收时通过导入的文件调用$on通过回调函数实现

代码实现

// component 文件夹中新建 eventBus.js 文件,用来实现兄弟组件通信
import Vue from "vue";

export default new Vue()
// 组件 A
import bus from "../eventBus"; export default { methods: { send() { bus.$emit("share", `我是A组件+ ${new Date().getTime()}`); }, }, };
// 组件 B
接收A组件的值{{this.accept}}
import bus from "../eventBus" export default { data(){ return{ accept:'' } }, mounted(){ bus.$on("share",val=>{ this.accept = val }) } }

效果展示

总结

  • 父传值子通过props实现
  • 子传父通过emit自定义事件 实现
  • 兄弟传值通过 eventBus实现

目前暂时总结三种常用的组件传值方法

以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/11712.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部