vue常用的组件传参通信方式

最新推荐文章于 2024-11-29 02:58:25 发布

Beamon__

最新推荐文章于 2024-11-29 02:58:25 发布

阅读量302

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 组件通信

本文链接：https://blog.youkuaiyun.com/Beamon__/article/details/82622993

vue 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了Vue中父子组件与兄弟组件间如何实现数据传递，包括父组件向子组件传值、子组件向父组件传值以及兄弟组件间的间接数据交换。通过具体代码示例，阐述了使用props和$emit进行数据双向流动的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件传值子组件

原理：父组件给子组件添加属性，子组件通过props获取属性值，接收到父组件传递的参数；

案例如下：

父组件代码如下：

<template>
    <div>
        <!-- 父组件添加入参生成模块 -->
        父组件传递：<input type="text" v-model="value">
        <!-- 子组件定义传递参数属性text -->
        <ChildA
            :text='value'>
        </ChildA>
    </div>
</template>
<script>
import ChildA from '../components/childA.vue';
export default {
    data(){
        return{
            value:''
        }
    },
    components:{
        ChildA,
    },
}
</script>

子组件代码如下：

<template>
    <div>
        接收父组件的值：{{text}}
    </div>
</template>
<script>
export default {
    data(){
        return{}
    },
    // 接收父组件属性
    props:['text']
}
</script>

ps：在父组件定义text属性并将参数通过该属性传递至子组件ChildA，在子组件通过props接收text属性并使用；

2.子组件传值父组件

原理：子组件通过$emit派发，子组件通过props获取属性值，接收到父组件传递的参数；

案例如下：

子组件代码如下：

<template>
    <div>
        <!-- 子组件添加入参生成模块，监听输入框改变向父组件发送数据“childChange”-->
        子组件传递：
        <input 
            type="text" 
            v-model="value"
            @input='childChange'>
    </div>
</template>
<script>
export default {
    data(){
        return{
            value:''
        }
    },
    methods:{
        childChange(){
            // 通过this.$emit向父组件发送数据，数据放在“childChange”中
            this.$emit('childChange',this.value)
        }
    }
}
</script>

父组件代码如下：

<template>
    <div>
        父组件接收值：{{text}}
        <!-- 绑定“childChange”，添加回调“receive”接收参数 -->
        <ChildA
            @childChange='receive'>
        </ChildA>
        <p />
    </div>
</template>
<script>
import ChildA from '../components/childA.vue';
export default {
    data(){
        return{
            text:''
        }
    },
    components:{
        ChildA,
    },
    methods:{
        // 通过回调函数入参获取子组件传递的参数
        receive(value){
            this.text = value;
        }
    },
}
</script>

ps：在子组件定义方法通过this.$emit发送数据，在父组件通过给子组件添加绑定事件，获取子组件的参数并使用；

3.兄弟组件传值

原理：引入中间控件，发送数据组件通过$emit发送数据，接收数据组件通过$on接收数据；

案例代码如下：

中间控件代码如下：

import Vue from 'Vue';
export default new Vue;

ps：创建一个vue实例并导出，作为中间控件使用；

父组件代码如下：

<template>
    <div>
        <ChildA></ChildA>
        <childB></childB>
    </div>
</template>
<script>
import ChildA from '../components/childA.vue';
import ChildB from '../components/childB.vue';
export default {
    data(){
        return{}
    },
    components:{
        ChildA,
        ChildB
    },
}
</script>

子组件A（数据发出组件）代码如下：

<template>
    <div>
        <!-- 子组件A添加入参生成模块，监听输入框改变向组件B发送数据-->
        子组件传递：
        <input 
            type="text" 
            v-model="value"
            @input='childChange'>
    </div>
</template>
<script>
// 引入中间控件
import Bus from '../assets/Bus.js';
export default {
    data(){
        return{
            value:''
        }
    },
    methods:{
        childChange(){
            // 通过Bus.$emit向B组件发送数据，数据放在“childChange”中
            Bus.$emit('childChange',this.value)
        }
    }
}
</script>

子组件B（数据接收组件）代码如下：

<template>
    <div>
        组件接收的值{{text}}
    </div>
</template>
<script>
// 引入中间控件
import Bus from '../assets/Bus.js';
export default {
    data(){
        return{
            text:''
        }
    },
    created(){
        // 通过Bus.$on接收A组件发来数据
        Bus.$on('childChange',(value)=>{
            this.text = value
        })
    }
}
</script>

ps：在发送数据和接收数据的组件都需要引入Bus.js作为中间控件；

以上内容为个人总结，不足之处还望支持，欢迎留言交流～