笑飞 发表于 2024-6-11 10:35:38

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

前言

Vue是数据驱动视图更新的框架,平时写业务时,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要
提示:以下是本篇文章正文内容,下面案例可供参考

一、props是什么?


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

使用规则

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




实现步骤


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



代码实现

//父组件
<template>
<div style="outline:1px solid red">
    <h1>我是父组件</h1>
    <button @click="count+=1">要传递的值{{count}}</button>
    //第三步通过v-bind动态传入子组件
    <Child :count="count"></Child>
</div>
</template>

<script>
//第一步导入组件
import Child from "../child/index.vue"
export default {
//第二步组件注册
    components:{
      Child,
    },
    data () {
    return {
      count: 1
    }
}
}//子组件
<template>
<div style="outline:1px solid green">
    <h1>我是子组件</h1>
    // 第二步在页面中使用
    <div>接收父组件传值:{{count}}</div>
</div>
</template>

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


效果展示



二.子传父 $emit

实现步骤


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

//子组件
<template>
<div style="outline:1px solid green">
    <h1>我是子组件</h1>
    <button @click="give">传递给父组件</button>
</div>
</template>

<script>
export default {
methods:{
    give(){
       //第一步调用 $emit 传递参数
       //emit 中第一个参数是在父页面中接收的 事件名称
       //emit 中第二个尝试是要传递的数据
      this.$emit("child",`我是子组件值+ ${new Date().getTime()}`)
    }
}
}// 父组件
<template>
<div style="outline:1px solid red">
    <h1>我是父组件</h1>
       <div>我是接收子组件的值:{{this.childValue}}</div>
       // 第一步在子组件中自定义事件接收 emit 传递的事件
    <Child :count="count" @child="accept"></Child>
</div>
</template>

<script>
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
<template>
<div style="width: 100%; height: 100px; outline: 1px solid red">
   <button @click="send">A组件给B组件传值</button>
</div>
</template>

<script>
import bus from "../eventBus";
export default {
methods: {
   send() {
   bus.$emit("share", `我是A组件+ ${new Date().getTime()}`);
   },
},
};
</script>

<style lang="less" scoped>
</style>// 组件 B
<template>
    <div style="width:100%;height:100px;outline:1px solid green">
      接收A组件的值{{this.accept}}
    </div>
</template>

<script>
import bus from "../eventBus"
    export default {
      data(){
            return{
                accept:''
            }
      },
      mounted(){
            bus.$on("share",val=>{
                this.accept = val
            })
      }
}
</script>效果展示



总结


[*]父传值子通过props实现
[*]子传父通过emit自定义事件 实现
[*]兄弟传值通过 eventBus实现
目前暂时总结三种常用的组件传值方法
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/3223644n4.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: Vue组件传值方式(props属性,父到子,子到父,兄弟传值)