vue父子组件动态传值的几种方式及注意问题详解
1.vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值，比如我这里的需求是，父组件动态通过axios获取返回的图片url数组然后传给子组件，上传图片的子组件拿到该数组后进行遍历并展示图片，因为有时候获取到的会是空，所以这里要考虑到动态获取。
方法有两种，
vue父组件向子组件动态传值方法一：
props传值，这里注意一个问题，传过来的值需要用watch监听并赋值，否则这里获取到的是空数组
父组件：
<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg> this.productImage=res.data.cover;
这里把通过后台返回的数组赋值给this.productImage，然后把该数组传给子组件定义的props属性src-list
export default {
name: '***',
props: {
srcList: {
}
},
data() {
uploadImg: ''
}
}
子组件：
watch代码
watch:{
srcList(curVal,oldVal){
if(curVal){
this.uploadImg=curVal;
}
},
}
vue父组件向子组件动态传值方法二：
通过ref属性，父组件调用子组件的方法，把要传的数组作为参数传给子组件，子组件获取该参数，并使用
父组件：
this.$refs.productImage.getSrcList(res.data.cover);
子组件：
getSrcList(val){
this.uploadImg=val;
}
同理，子组件向父组件传值，如果是动态改变的，也要记得加watch函数，动态改变之后执行的操作写在watch里，比如 this.$emit 的函数！
2.vue父组件中获取子组件中的数据
<FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <FormItem label="上传营业执照" prop="businessLicence"> <uploadImg :width="350" :height="200" :name="'businessLicence'" size="350px*200px" ref="businessLicence"></uploadImg> </FormItem>
自己写了个上传图片的子组件，父组件需要获取到子组件上传的图片地址，
vue父组件中获取子组件中数据方法一：
给相应的子组件标签上加 ref = “avatar”
父组件在最后提交的时候获取this.$refs.avatar.相应数据 即可，因为在这里才能保证图片已经上传，否则如果图片没上传，拿到的值一定为空。
vue父组件中获取子组件中数据方法二：
$emit()
/*
子组件
*/
<template>
<input type='file' @change="changeUrl" />
</template>
<script>
export default {
methods: {
changeUrl(e) {
this.$emit('changeUrl', e.currentTarget.files[0].path)
}
}
}
</script>
/*
父组件
*/
<template>
<FormItem label="上传营业执照" prop="businessLicence">
<uploadImg :width="350" :height="200" :name="'license'" size="350px*200px" @changeUrl="getUrl"></uploadImg>
</FormItem>
</template>
<script>
export default {
methods: {
getUrl(path) {
//这个就是你要的path,并且会双向绑定
}
}
}
</script>
当使用this.$emit方法获取的时候，如果子组件想要给父组件传入多个值，则可以写多个参数，父组件在获取的时候获取多个参数的值即可
//父组件
getUrl(path1，path2) {
console.log(path1,path2)
}
注意问题：
1、父组件相应事件写在该子组件上
2、子组件如果并没有click事件触发，也没有类似本例input需要change事件触发，则在created或者mounted函数中让该函数加载即可
3、子组件向父组件传值需 是父组件 用到了 ，如果多个父组件引用了该子组件，则只有传值的时候用的子组件来自哪个父组件，这个父组件才可以接收到值，其他父组件获取不到子组件传的值。
以上就是vue父子组件动态传值的几种方式及注意问题详解的详细内容，更多关于vue父子组件动态传值的几种方式的资料请关注我们其它相关文章！
相关推荐
-
vue3自定义组件之v-model实现父子组件双向绑定
vue3 v-model父子组件双向绑定 vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法: // vue2的v-model双向绑定方法 model: { prop: 'value', //3.x默认值改为了modelValue event: 'input' //3.x默认值改为了update:modelValue }, //使用 this.$emit('input', index); vue3.x采用以下方式(v-model默认对应的
-
Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别
既然有父传子那么肯定有子传父,有子传父肯定也有两者之间相互绑定 这里我们先看一下子传父的写法: 一.子传父:$emit() 看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子传父</title> <script src="https://cdn.jsdelivr.net/npm/vue"></sc
-
vue3 父子组件间相互传值方式
目录 vue3父子组件相互传值 父向子传值 子组件向父组件传值 vue3父子组件传值的注意事项 解决办法:两种 vue3父子组件相互传值 父向子传值 父 <pie-chart :pieData="post_data.pid" /> 父组件只需在子组件上声明一个变量即可. :代表变量,可以传变量;否则只能传常量 子 export default { props:['pieData'], setup(props,ctx) { const pie_
-
Vue父子组件传值的三种方法
目录 前言 一.Vue父子传值的方法 二.方法详解 1.props / $emit 2.$parent / children 3.$ref 总结 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 例如:Vue的学习是路阻且艰的,这是一个系列文章,帮助vue的新手可以快速上路,创建的自己的项目,该系列文章主要讲解作者在vue学习之路上,创建项目中最重要的知识,因为笔者水平有限,希望大家多多指正,该系列文章旨在让大家感受vue的便捷,详细学习vue希望大家多多观看官方文档. 一
-
Vue3父子组件互调方法的实现
目录 一.父组件调用子组件方法 1.子组件 2.父组件 3.测试结果 4.关于 defineExpose 的官方文档 二.子组件调用父组件方法 1.子组件 2.父组件 3.测试结果 4.关于 defineEmits 的官方文档 下面演示均为使用 setup 语法糖的情况! 一.父组件调用子组件方法 下面演示为使用 setup 语法糖的情况,值得注意的是子组件需要使用 defineExpose 对外暴露方法,父组件才可以调用! 1.子组件 <template> </template>
-
Vue中一个组件调用其他组件的方法详解(非父子组件)
目录 前言 方式一:引用式 方式二:vuex 1.src/store/index.js 2.被使用组件- A 页面(组件) 3.使用触发页面-B 页面(组件) 方式三:使用事件总线eventBus定义全局事件 1.src/main.js 2.触发页面-B组件/发布事件 3.接收页面-A组件/订阅事件 4.移除事件 总结 前言 Vue中,一个组件调用其他组件的方法(非父子组件) 场景——B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式
-
Vue实现父子组件页面刷新的几种常用方法
目录 1.原地页面重新加载(不推荐) 2.空白页面作为过渡 3.使用Provide / Inject组合控制显示 4.v-on:param父组件监听子组件事件 参考文档: 很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望返回的界面中的数据要和数据库中的数据进行同步,就需要刷新当前页面,如果是使用ajax可以使用异步请求实现页面的局部刷新,Vue常用的几种刷新页面方法如下: 1.原地页面重新加载(不推荐) this.$router.go(0) //根据路由重新定
-
关于Vue3父子组件emit参数传递问题(解决Vue2this.$emit无效问题)
目录 1.解决this.$emit无效问题 2.Vuex问题 3.总结 之前写了一篇Vue3路由跳转问题的博客,发现还是有很多同学对基本的使用改变还没有了解,于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是: 1.Vue3中不在强调this的使用,可以说你在setup中完全不能用this,不像Vue2中把全部的内容都集成到this中. 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在(当然Vuex现在可以用没什么变化). 3.如果您有Vue
-
浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定
目录 一.vue2 中 sync 修饰符的功能在 vue3 中如何呈现? 1.sync 修饰符回顾 2.sync 的语法糖功能在vue3中如何编写使用? 二.如何通过v-model实现父子组件的双向数据绑定 1.单个数据双向绑定 2.多个数据双向绑定 - 与单数据绑定差别不大 3.利用 computed 简化父子组件双向数据绑定 一.vue2 中 sync 修饰符的功能在 vue3 中如何呈现? 1.sync 修饰符回顾 1.vue 规则:props 是单向向下绑定的,子组件不能修改 props
-
vue父子组件动态传值的几种方式及注意问题详解
1.vue父组件向子组件动态传值的两种方法 在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空,所以这里要考虑到动态获取. 方法有两种, vue父组件向子组件动态传值方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 父组件: <uploadImg :width="200" :
-
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
当我们在书写 vue 组件的时候,也许可能会用到数据传递:将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件: 每当我们遇到这样的需求的时候,我们总是会想到有三种解决办法: 通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex 非父子组件的通信传递 Vue Event Bus ,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递. 后来再逛社区的时候我又发现了还有第四种传递方式, inheritAttrs +
-
Vue实现组件间通信的几种方式(多种场景)
目录 1.Props 父 >>> 子 (Props) 子 >>> 父 ($emit) 2.Bus事件总线 3.Vuex状态管理库 4.Router 5.缓存 以下是我在开发中用到过的vue组件之间的通信方式,不同的场景使用不同的方式,基本满足所有开发场景中的通信需求,从最简单的事例着手,讲述如何使用,话不多说直接开始,满满的干货,建议看完. 1.Props 父 >>> 子 (Props) 一个组件里面引入另外一个组件,此时构成了一种"父子
-
详解Vue 路由组件传参的 8 种方式
我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4 . 编程式路由传参 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递 路由配置 路径参数 用冒号 : 表示. const routes = [ // 动态段以冒号开始 { pat
-
Spring AOP拦截-三种方式实现自动代理详解
这里的自动代理,我讲的是自动代理bean对象,其实就是在xml中让我们不用配置代理工厂,也就是不用配置class为org.springframework.aop.framework.ProxyFactoryBean的bean. 总结了一下自己目前所学的知识. 发现有三种方式实现自动代理 用Spring一个自动代理类DefaultAdvisorAutoProxyCreator: <bean class="org.springframework.aop.framework.autoproxy.
-
对Python中创建进程的两种方式以及进程池详解
在Python中创建进程有两种方式,第一种是: from multiprocessing import Process import time def test(): while True: print('---test---') time.sleep(1) if __name__ == '__main__': p=Process(target=test) p.start() while True: print('---main---') time.sleep(1) 上面这段代码是在window
-
vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu
-
webstorm中配置Eslint的两种方式及差异比较详解
写在前面 这两种方式的配置基本相同,都是配一下node地址,Eslint执行文件的地址,Eslint的配置文件(就是.eslintrc)等,而且网上很方便就可以搜索到,就不多说了. 之所以要比较一下两者的差异,就是因为对于没有配置过的同学来说,看了诸如"怎么在webstorm下配置Eslint"的问题下面的回答,既有说用方式1,又有说方式2的,然后这两种方式配置项还差不多(都是在webstorm的一个setting页面里面设置三四个项目,然后勾上enable复选框),就容易混淆. 再加
-
java实现图的邻接表存储结构的两种方式及实例应用详解
前言 本篇来谈一谈图的邻接表实现的两种方式,首先我们明确一点"学会图的邻接表实现的关键点在于":你所建立的图的邻接表的对象是什么! 首先我们看一下<算法导论>中关于图的邻接表的定义: 图G=(V,E)的邻接表表示有一个包含 |V| 个列表的数组Adj所组成,其中每个列表对应于V中的一个顶点,对于每一个u∈V,邻接表Adj[u]包含所有满足条件(u,v)∈E的顶点v,亦即,Adj[u]包含图G中所有和顶点u相邻的顶点.(或者他也可能指向这些顶点的指针),每个邻接表中的顶点一般
-
详解vue父子组件间传值(props)
先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入