Vue之父子组件与子组件之间的传参

最新推荐文章于 2024-08-12 16:45:40 发布
最新推荐文章于 2024-08-12 16:45:40 发布
阅读量1.3k 收藏
点赞数
文章标签： vue 子组件之间传值 父组件向子组件传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39105508/article/details/82994816
版权

声明：此篇是我学习的时候借鉴别人的然后学习后整合一下。

步骤：

    1.子组件之间传参

             子组件之间的传参比较简单，具体用到以下几个方法，分别是$emit()，$on()与mounted()。

              $emit()方法介绍：此方法是传参方法，具有两个参数，作用分别为声明传递对象与要传递的参数。

              $on()方法介绍：此方法是接参方法，具有两个参数，作用分别为$emit()所声明的对象与处理接受到的参数。

              mounted()方法介绍：此方法是一个钩子函数。

 

             是不是太啰嗦了？ emmm  上干货！

           此处我用了三个子组件互相传参。

           （1）定义的三个子组件

        <template id="vueziA">
            <div>
                <h4>A组件</h4>
                <p>{{a}}</p>
                <p>{{c}}</p>
                <input type="button" value="把A数据给C" @click="send" />
            </div>
        </template>
        <template id="vueziB">
            <div>
                <h4>B组件</h4>
                <p>{{b}}</p>
                <input type="button" value="把B数据给C" @click="send" />
            </div>
        </template>
        <template id="vueziC">
            <div>
                <h4>我是C组件,我在坐等接收数据</h4>
                <p>{{a}}</p>
                <p>{{b}}</p>
                <input type="button" value="把C数据给A" @click="send" />
            </div>
        </template>

            （2）先生成一个空实例，然后各组件的设置

//准备一个空的实例对象
            var Event = new Vue();
            var A={
                template:'#vueziA',
                data(){
                    return {
                        a:'我是A里面的数据',
                        c:'我也坐等C的数据'
                    }
                },
                methods:{
                    send(){        //A发送数据
                        Event.$emit('a-msg',this.a);
                    }
                },
                mounted(){
                    var _this = this;
                    Event.$on('c-msg', function(c){
                        _this.c = c;
                    })
                }
            };
            var B={
                template:'#vueziB',
                data(){
                    return {
                        b:'我是B里面的数据'
                    }
                },
                methods:{
                    send(){
                        Event.$emit('b-msg',this.b);
                    }
                }
            };
            var C={
                template:'#vueziC',
                data(){
                    return{
                        a:'',
                        b:'',
                        c:'我是C里面的数据，我过来啦'
                    }
                },
                methods:{
                    send(){
                        Event.$emit('c-msg',this.c);
                    }
                },
                mounted(){        //两种接收的方式
                    var _this = this;
                    Event.$on('a-msg',function(a){
                        _this.a=a;
                    });
                    Event.$on('b-msg',function(b){
                        this.b = b;
                    }.bind(this))
                }
            };

          （3）在vue实例里面引入组件

   


new Vue({
    el:'#box',
    components:{
        'com-a':A,
        'com-b':B,
        'com-c':C
    }
})

此时就可以进行子组件之间的传参。

2.父传子

   父组件向自组件传参，需要父组件定义参数，子组件通过props属性数组形式传值。

     例如：

       父组件：<v-zi :name="str1"></v-zi>

       子组件：props:["name"]

      是不是可懵？  来  看代码


		<div id="box">
             <!-- 用于父子组件之间传值 -->
            <div>
                <h2 style="color: red">用于父子组件之间传值</h2>
                <v-fu></v-fu>
            </div>
        </div>
        <template id="vuefu">
            <div>
                <h2>父组件</h2>
                <h2>接收子组件值：{{msg}}</h2>
                <button @click="fuToZi">父传子</button>
                <v-zi :name = 'b'></v-zi>
                <hr>
            </div>
        </template>

        <template id="vuezi">
            <div>
                <h2>子组件</h2>
                <h2>接收父组件值：{{name}}</h2>
            </div>
        </template>

下面是vue实例的设置，通过在父组件定义属性值，在实例的子组件components的props来定义要获取的值。

            new Vue({
                el:'#box',
                components:{
                    'v-fu':{
                        template:'#vuefu',
                        data(){
                            return {
                                msg:'我是父组件',
                                b:'看我变化',
                                c:'我来子组件这看看'
                            }
                        },
                        methods:{
                            change(msg){
                                this.msg = msg;
                            },
                            fuToZi(msg){
                                this.b = this.c
                            }
                        },
                        components:{
                            'v-zi':{
                                template:'#vuezi',
                                props:['name'],
                                data(){
                                },
                                methods:{
                                }
                            }
                        }
                    }
                }
            })

此时，父组件向子组件传值已经完成。

3.子传父

    原理就是子组件注册触发事件，父组件设置事件响应，emmm，姑且这么解释吧。

      父组件：<v-zi @zizujian="change"></v-zi>

      子组件：      send(){        //A发送数据
                                   this.$emit('zizujian',this.b);
                           }

    上代码。

<div id="box">
             <!-- 用于父子组件之间传值 -->
            <div>
                <h2 style="color: red">用于父子组件之间传值</h2>
                <v-fu></v-fu>
            </div>
        </div>

        <template id="vuefu">
            <div>
                <h2>父组件</h2>
                <h2>接收子组件值：{{msg}}</h2>
                <v-zi @zizujian="change"></v-zi>
                <hr>
            </div>
        </template>

        <template id="vuezi">
            <div>
                <h2>子组件</h2>
                <div>
                    <input type="button" value="子传父" @click="send" />
                </div>
            </div>
        </template>
            new Vue({
                el:'#box',
                components:{
                    'v-fu':{
                        template:'#vuefu',
                        data(){
                            return {
                                msg:'我是父组件'
                            }
                        },
                        methods:{
                            change(msg){
                                this.msg = msg;
                            }
                        },
                        components:{
                            'v-zi':{
                                template:'#vuezi'
                                data(){
                                    return {
                                        a:'我是子组件',
                                        b:'我来父组件这看看'
                                    }
                                },
                                methods:{
                                    send(){        //A发送数据
                                        this.$emit('zizujian',this.b);
                                    }
                                }
                            }
                        }
                    }
                }
            })

以下是全部代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue组件传参</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <script type="text/javascript" src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="box">
             <!-- 用于父子组件之间传值 -->
            <div>
                <h2 style="color: red">用于父子组件之间传值</h2>
                <v-fu></v-fu>
            </div>

             <!-- 用于子组件之间传值 -->
            <div style="border: 1px solid green; margin-bottom: 10px； width: 300px;">
                <h2 style="color: red">用于子组件之间传值</h2>
                <com-a></com-a>
                <com-b></com-b>
                <com-c></com-c>
            </div>
        </div>

        <template id="vuefu">
            <div>
                <h2>父组件</h2>
                <h2>接收子组件值：{{msg}}</h2>
                <button @click="fuToZi">父传子</button>
                <v-zi :name = 'b'  @zizujian="change"></v-zi>
                <hr>
            </div>
        </template>

        <template id="vuezi">
            <div>
                <h2>子组件</h2>
                <h2>接收父组件值：{{name}}</h2>
                <div>
                    <input type="button" value="子传父" @click="send" />
                </div>
                <v-fu @fuzujian="change"></v-fu>
            </div>
        </template>

        <template id="vueziA">
            <div>
                <h4>A组件</h4>
                <p>{{a}}</p>
                <p>{{c}}</p>
                <input type="button" value="把A数据给C" @click="send" />
            </div>
        </template>
        <template id="vueziB">
            <div>
                <h4>B组件</h4>
                <p>{{b}}</p>
                <input type="button" value="把B数据给C" @click="send" />
            </div>
        </template>
        <template id="vueziC">
            <div>
                <h4>我是C组件,我在坐等接收数据</h4>
                <p>{{a}}</p>
                <p>{{b}}</p>
                <input type="button" value="把C数据给A" @click="send" />
            </div>
        </template>



        <script type="text/javascript">


            //准备一个空的实例对象
            var Event = new Vue();
            var A={
                template:'#vueziA',
                data(){
                    return {
                        a:'我是A里面的数据',
                        c:'我也坐等C的数据'
                    }
                },
                methods:{
                    send(){        //A发送数据
                        Event.$emit('a-msg',this.a);
                    }
                },
                mounted(){
                    var _this = this;
                    Event.$on('c-msg', function(c){
                        _this.c = c;
                    })
                }
            };
            var B={
                template:'#vueziB',
                data(){
                    return {
                        b:'我是B里面的数据'
                    }
                },
                methods:{
                    send(){
                        Event.$emit('b-msg',this.b);
                    }
                }
            };
            var C={
                template:'#vueziC',
                data(){
                    return{
                        a:'',
                        b:'',
                        c:'我是C里面的数据，我过来啦'
                    }
                },
                methods:{
                    send(){
                        Event.$emit('c-msg',this.c);
                    }
                },
                mounted(){        //两种接收的方式
                    var _this = this;
                    Event.$on('a-msg',function(a){
                        _this.a=a;
                    });
                    Event.$on('b-msg',function(b){
                        this.b = b;
                    }.bind(this))
                }
            };

            new Vue({
                el:'#box',
                components:{
                    'v-fu':{
                        template:'#vuefu',
                        data(){
                            return {
                                msg:'我是父组件',
                                b:'看我变化',
                                c:'我来子组件这看看'
                            }
                        },
                        methods:{
                            change(msg){
                                this.msg = msg;
                            },
                            fuToZi(msg){
                                this.b = this.c
                            }
                        },
                        components:{
                            'v-zi':{
                                template:'#vuezi',
                                props:['name'],
                                data(){
                                    return {
                                        a:'我是子组件',
                                        b:'我来父组件这看看'
                                    }
                                },
                                methods:{
                                    change(a){
                                        console.log(1)
                                        this.a = a;
                                    },
                                    send(){        //A发送数据
                                        this.$emit('zizujian',this.b);
                                    }
                                }
                            }
                        }
                    },
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            })
        </script>
	</body>
</html>

 

bug菌
关注
组件间传参
wzstd的博客
10-03 1211
props和emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过emit 父组件向子组件传递数据是通过prop传递的， 子组件传递数据给父组件是通过emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过emit触发事件来做到的。 2.中央事件总线(bus) 如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。 新建一个Vue事件bus对象，然后通过bus.emit触发事件，bus.emit触发事件，bus.emit触发事件，bus.on监.
Vue3 父子组件传参
qq_43502858的博客
06-19 580
父组件通过 v-bind 绑定一个数据，然后子组件通过 defineProps 接受传过来的值 父组件 子组件 使用 withDefaults 给传参指定默认值 子组件给父组件传参 通过 defineEmits 派发一个事件 通过 defineExpose 子组件向父组件暴露数据 父组件 子组件...
vue 子组件与子组件之间传参
warrah 南极狼
12-22 4227
封装可以让整体程序看起来很优雅，但有些问题需要解决，当然这些问题解决之后，开发效率自然就上去了，我的目标就是高效，然后能准点下班。靠时间换取金钱，意义不大。 子组件与子组件之间是不能直接传值的，需要凭借父组件，这个也非常容易理解。 1 子组件向父组件传参 查询条件子组件，显示格局条件，如果超过8个，则显示下拉菜单， 子组件通过this.$emit("addCond",item)传参，即子组件可以使用 $emit 触发父组件的自定义事件 <template> <div>
vue组件之间的数据传递
最新发布
qq_59273935的博客
08-12 263
第一种方式：通过父组件给子组件传递函数类型的props实现：子组件给父组件传递数据。2）第二种方式：通过父组件给子组件绑定一个自定义事件实现：子组件给父组件传递数据。通过在子组件身上绑定自定义属性，然后再子组件里使用props属性来接收即可。3）第三种方式：通过父组件给子组件绑定一个自定义事件实现：使用ref实现。
两个子组件之间的传值
qq_43371287的博客
06-03 4815
举例：将A的drawerStart数值传递给B,来决定B的某个样式是否显示,并且点击 @click="changerDrawerStart"会改变 drawerStart的数值（这里可以使用监听watch，监听drawerStart的改变），通过$emit方法来实现传参的方式 组件A代码： 思路：如果两个子组件在同一个父组件上，可以将父组件作为一个桥梁(用一个中间值)，中间商，先将决定性元素的子组...
Vue——子组件与子组件进行数据传递
老简单题
03-02 1239
首先，两个子组件之间有公共的祖先 直接将消息从子组件发给父组件，父组件再传给子组件，子组件获取 假设第一个子组件为A，第二个子组件为B，父组件为C （1）子组件A发给父组件C this.$emit('发给父组件C',你的数据); （2）父组件接受C <子组件A @发送给父组件C="getdata"/> （发送给父组件C这个字段要与子组件中发送出来的字段一致） export default { name: "search", data() { return {
子组件相互传值
呜啦吧哈的博客
04-08 1389
一、父组件中转 内涵：子1 传父 ——父传子2 父：传递布尔值openComment <template> <child1 :open-comment.sync="openComment"</child1> <child2 :open-comment.sync="openComment"></child2> </template> import child from "../child" export default{
Vue.js父与子组件之间传参示例
10-20
Vue.js提供了多种方式来实现父组件与子组件之间参数的传递。以下是对标题和描述中所述知识点的详细说明： 1. **父组件向子组件传参（Props）** 在Vue.js中，父组件向子组件传递参数通常通过`props`属性实现。例如...
VUE 父子组件传递
02-23
HTML编码中，利用了Vue框架，在该框架下父子组件直接经常需要进行数据传递
vue中父子组件通信---父组件向子组件传参
喜羊羊love红太狼
01-10 530
vue 组件之间调用
vue.js 父向子组件传参的实例代码
10-19
Vue.js中的组件通信不仅限于父子组件之间的通信，还包括了非父子组件之间的通信，比如通过事件发射器（event bus）、Vuex状态管理库等进行的更复杂的数据传递。 需要注意的是，在子组件的模板中，父组件传递的属性...
vue学习笔记day17 子组件和子组件之间的传值
weixin_39209728的博客
02-29 516
一 vue的组件传值 （通讯） a>父子组件通信 props 父组件给子组件传值 子组件使用父组件数据 1》在子组件props:[定义数据名称] 子组件中使用 {{子组件props定义的数据名称}} 2》<com :子组件名称="父组件数据名称"></com> 将父组件数据名称传给子组件中 props是单向数据流 ...
Vue 子组件与子组件之间传值
hh3167253066的博客
09-03 3699
可以借用公共父元素。子组件A this.$emit(“eventName”, data) 触发事件，父组件监听事件，更改父组件 data , 通过Props 传值到子组件B,子组件B watch Props（注意不是watch 子组件B自身data） <el-tab-pane label="组织信息" name="second"> <el-row :gutter="30"> <el-col :span="6"
vue子组件和子组件之间的传参
rta_bh的博客
11-20 1168
因项目需求，我把同一个界面中的两个部分拆分成了两个组件，但是之间又有关联，需要用户在一个组件中输入参数，然后再另一个组件需要这个参数来进行操作。就像商城中的搜索（组件A），然后展示列表（组件B），组件A给组件B传入输入的参数为组件B筛选列表使用。 经过我在网上搜索的方法，和后来项目遇到子路由需要调用父路由的方法，我在另外一个博客也写了，同样适用本例，原理都是一样的。下面我主要写第一个方法。另外一种方法你可以去看我的另外一个博客。 这个方法很简单，我把原理先说一下，单独创建一个js文件用来创建一个新的vu
vue子传子
xianyaono1的博客
07-23 798
父子组件传值的问题，前面已经讲过，不再叙述，这里来说一种非父子组件的传值。 vue官网指出，可以使用一个空vue实例作为事件中央线！ 也就是说 非父子组件之间的通信，必须要有公共的实例（可以是空的），才能使用 $emit 获取 $on 的数据参数，实现组件通信 。 比如说： 公共实例文件bus.js，作为公共数控中央总线 import Vue from “vue”; export default new Vue(); 第一个组件 first.vue import Bus from ‘…/bus.js’; e
Vue——两个子组件之间的传值
qq_43201350的博客
07-13 622
Vue——两个子组件之间的传
组件之间传值（父子组件、非父子组件）
qq_35779070的博客
08-24 633
组件之间传值（父子组件、非父子组件） 一、父子组件之间传值 1.父向子传值 （1）.父组件 父组件里需引用子组件，并传值给子组件，代码如下： <template> <div> <span>哈哈哈哈</span> <span style="display: block;">{{ title}}</span> <son v-bind:msg="msg"></son> --------
组件间常见的传值方式
weixin_53818172的博客
07-15 965
parent 和 $children（父子组件之间的直接引用）：通过parent属性可以直接访问父组件的实例，通过$children数组可以直接访问子组件的实例。$refs（通过引用访问组件实例）：通过ref属性可以为组件添加一个唯一的引用标识，在父组件中可以通过refs属性访问到子组件的实例。Emit（子组件向父组件传值）：子组件通过$emit方法触发自定义事件，父组件通过监听这些事件来接收子组件传递的值。Props（父组件向子组件传值）：使用props属性来向子组件传递数据。
Vue组件与页面传参完全指南
"Vue传参方法的全面解析，包括页面和组件之间的参数传递，涵盖了路由传参、props、vuex、事件总线等常见方式。本文旨在提供一个全面的参考，帮助开发者更好地理解和运用Vue的参数传递机制。" 在Vue框架中，页面和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug菌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值