vue 父子组件间的通迅

墨蓝 2022-06-04 05:54 252阅读 0赞

**父组件调用子组件的方法**

在父组件里  先给子组件加上一个ref ，起个名字，

<serviceRateAction ref="serviceRate" ></serviceRateAction>

然后根据子组件的名字 serviceRate  直接可以用 this.$refs.serviceRate.parentClick();   可直接调起子组件的 parentClick  方法

this.$refs.serviceRate.parentClick();

**子组件调用父组件的方法**

在父组件里  先给子组件传递要调用的方法，用 v-on:abc="goback" 来传递，    abc 是你自己起的名字，子组件里要用有,传的是 goback 方法，可写多个

<serviceRateAction ref="serviceRate" v-on:abc="goback"></serviceRateAction>

然后在子组件里  this.$emit('abc');  可直接高调用父组件的 goback 方法

this.$emit('abc');

**父组件给子组件传递数据**

1、直接传：

**父中：**

<serviceRateAction ref="serviceRate" :id="parend.id" :name="parent.name" :obj="obj"></serviceRateAction>

parent.id、name 是父组件的一个数据，然后子组件接收

**子中：**

用  props  来接收，可以监听 id 的变化来做相应的操作

mounted :function(){
    			this.$nextTick(function () {
    				
    			})
    		},
    		watch : {
    			'id' : 'DataChange'
    		},
    		props : ['id','name'],

传递对象数据

<serviceRateAction :obj="obj"></serviceRateAction>

子中：seller 可以直接在模板上用 \{ \{seller.name\}\}

props : {
    	    	seller : {
    	    		type : Object  //设置数据类型
    	    	}
    	    }

2、可以用vuex来实现

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关 [vue] 父子组件间传值

境说明: vue 3.x + ant-vue 父组件(Album.vue)使用: <template> <div> <a-butt...

「爱情、让人受尽委屈。」/ 2024年04月17日 20:25/ 0 赞/ 94 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 340 阅读

相关 vue父子组件间传值

子组件 <template> <div class="confirm_button"> <el-button type="primar

你的名字/ 2022年10月02日 11:50/ 0 赞/ 309 阅读

相关 vue 父子组件间的通迅

父组件调用子组件的方法在父组件里先给子组件加上一个ref ，起个名字， <serviceRateAction ref="serviceRate" ></ser

墨蓝/ 2022年06月04日 05:54/ 0 赞/ 253 阅读

相关 vue2.0父子组件间传递数据

关于父子组件之间传递数据其实文档上都说得很明白。但是如果完全不懂的人做计也看不懂，下面是一个小例子，有两个文件 1.parent.vue <template

蔚落/ 2022年06月01日 09:29/ 0 赞/ 239 阅读

相关 Vue 父子组件间的通信

前言在 Vue 项目中父子组件的通信是非常常见的，最近做项目的时候发现对这方面的知识还不怎么熟练，在这边做一下笔记，系统学习一下吧。 1 父组件传值给子组件 1.1

迈不过友情╰/ 2022年04月08日 11:20/ 0 赞/ 343 阅读

相关 vue如何实现父子组件间通信

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，那么不同组件之间的数据就无法相互引用。组件间如何通信，就成为了vue中重点了。这篇文章将会通过prop

逃离我推掉我的手/ 2022年02月25日 05:52/ 0 赞/ 312 阅读

相关 Vue入门七、父子组件间通讯

一、父子组件通讯父传子： 1、父用子的时候通过属性传递 2、子要声明props:\['属性名'\]接收 3、子组件template中直接用 <!D

心已赠人/ 2022年01月16日 20:00/ 0 赞/ 275 阅读

相关 vue父子组件间的数传递(当页)

1.在父组件中定义数据名 ![20190626175801503.png][] 2.父组件中设置数据 ![watermark_type_ZmFuZ3poZW5naGVpd

淡淡的烟草味﹌/ 2021年12月24日 03:09/ 0 赞/ 319 阅读

相关 vue父子组件间互相传递数据

vue父子组件间传递参数 1.父传子使用 props 向子组件传递数据。在父组件中定义 hMsg参数，v:bind 绑定childMsg的值为hMsg；子组

心已赠人/ 2021年11月02日 06:58/ 0 赞/ 425 阅读