Vue组件之间相互传值的方式

蔚落 2022-11-02 13:17 340阅读 0赞

# 1父传子 #

## 1.1父组件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70][]

## 1.2子组件：**在 props 中添加了元素之后，就不需要在 data 中再添加变量了** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 1][]

#  2子传父 #

## 2.1子组件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 3][]

## 2.2父组件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 5][]

# 兄弟组件传值一：使用全局函数全局事件 #

第一步: 在入口文件main.js里暴露一个vue实例

export const EventBus = new Vue() // 暴露一个vue实例

第二步: 在要传值的文件里导入vue实例模块，age使用自己的变量，再定义一个全局触发事件函数，触发事件函数绑定在一个button上

<template>
        <div>
            <h3>用户编辑页面</h3>
            <p>编辑用户</p>
            <p>年龄: {
       { age }}</p>
            <p><button @click="changeAge">编辑年龄</button></p>
        </div>
    </template>
    <script>
    import { EventBus } from "../main.js"
    // 导入模块
    export default {
     // props: ["age"],
     data() {
         return {
             age: 10,
         }
        },
      methods: {
          changeAge: function() {
              this.age = 20
              EventBus.$emit("editAge", this.age)
              // 触发全局事件 并且把改变后的值传入事件函数
              // console.log(EventBus)
          }
        }
    }
    </script>

第三步: 在要被传入值得组件中也导入vue实例模块，也不使用父组件中传过来个age,自己重新定义，创建一个初始化的钩子函数，再使用created钩子函数中使用传值组件的全局定义事件。

import { EventBus } from "../main.js"
    export default {
        data() {
            return {
                name : this.myName,
                age: 10
            }
        },
        methods: {
            changeParentName: function() {
                this.$emit('changeParentName', 'xiaohong')
                // this.$emit('')触发自定义事件
            },
         created() {
             EventBus.$on('editAge', (age) => { // 使用$on去绑定事件
                 this.age = age // 使用es6写法,this刚好指向父级
             })
         }
    }

#  兄弟组件传值二：使用全局函数全局事件 #

第一步: 在父组件中给要传值的兄弟两个都绑定要传的变量。

<app-user-detail :age="age"></app-user-detail>
    <app-user-edit :age="age" @editAge="changeAge"></app-user-edit>

第二步: 在要传值得组件中接受变量和绑定触发事件

<template>
        <div>
            <h3>用户编辑页面</h3>
            <p>编辑用户</p>
            <p>年龄: {
       { age }}</p>
            <p><button @click="changeAge">编辑年龄</button></p>
        </div>
    </template>
    <script>
    export default {
        props: ["age"],
        methods: {
            changeAge: function() {
            this.$emit('editAge', 20)   // 触发自定义事件并传值
            }
        }
    }
    </script>

第三步: 在父组件中绑定要传组件中的自定义事件

export default {
        data() {
            return {
                name: 'zhuli',
                age: 10,
            }
        },
        components: {
            'app-user-detail': UserDetail,
            'app-user-edit': UserEdit,
        },
        methods: {
            changeAge: function(age) {
                this.age = age
            },
        }
    }

总结: 当要传值的组件改变了父组件的变量，父组件又可以把改变的值传值所绑定变量的组件，实现兄弟间传值。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70]: /images/20221024/de38720194dc4b068743c63a93d8496a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/c07cb6cb243a47b889f33d518fa9a305.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/37732b722c0c4d0fa9ca8198b3b98377.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/213bfdfeef674e3d8bf7df9b10fbd97c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/8e93aa6b05024bb6bb8f056123bde7ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/78d8874625734b07ba91febb46339b83.png