VUE父子组件-传数据的理解

1、概述。
父组件对子：利用props接收参数。应用场景：对于可复用的子组件，传参使子组件复用。

子向父传递：利用事件机制、在子组件触发事件时，利用emit设置传的参数以及对应的函数名发送给父组件内的对应函数、两个函数对应的时候不需要添加参数、会默认传给父内的函数。

2、使用方法
父组件对子：在子模板内添加动态属性 :mydata=“item”、在子组件内部添加props:[‘mydata’],这样就实现对子组件的传递。
console.log(this.mydata)

子向父：
在子模板内设置触发事件
@click=‘handleclick’
在子组件设置传递的参数以及映射到父组件的对应函数。
handleclick(){
console.log(‘子组件发送请求…’)
this.$emit(‘event’,this.mydata.detial)
}
在子模板内添加函数对应
@event=“handleevent”
注意handleevent和handleclick是不同的函数，一个是在子组件定义的传参函数、一个是父组件内接收的函数。

在父组件打印传递的数据
handleevent(val){
console.log(val)
}
默认val为this.mydata.detial

VUE父子组件-传数据的理解相关推荐

Vue父子组件传递数据
<template><div><!-- <div>< ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
Vue父子组件传递/子传父
1.子传父的意思就是,,子组件内容传给父组件,,使父组件可以随时使用子组件传来的数据,使用方法为:自定义函数 1.首先我们来做一个仿淘宝侧边栏商品,点击或者鼠标移动到上面出现内容商品案例 2.以上面这 ...
Vue父组件传子组件数据中，Vue监听不到数据改变
Vue父组件传子组件数据中,Vue监听不到数据改变官方文档说明(引用来自官网) 检测变化的注意事项由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一些办法来 ...
Vue父子组件传值----$emit子传父
Vue父子组件传值是个比较经典的问题,在这里,咱们先谈一下,子组件给父组件传值. 这是一个子组件  <template><div class=& ...
Vue父组件传给子组件数据,子组件得不到数据解决方法
目录第一种方案 (1)数据为数组时候父组件子组件 (2)数据为对象时候父组件子组件 (3)数据为数字时候父组件子组件 (4)数据为字符串时候父组件子组件第二种方案 ...
vue父子组件通信之随机数小练习
目录 vue父子组件通信的理解父组件代码: 子组件代码: 效果图: vue父子组件通信的理解 1.Vue中子组件不能直接引用父组件的数据,需要通过props选项接收来自父组件的数据. 2.props ...
【day 08】vue父子组件通信
props实现父子组件通信 Song.vue Singer.vue ==>父组件 SectionList.vue ==>子组件 SectionList 需要标题+列表数据爸爸传什么数据 ...
Vue父子组件通信和插槽
Vue父子组件通信父子组件通信和双向绑定 -如果使用v-model进行双向绑定时,当绑定在组件的props中的数据时,虽然可以完成双向绑定,但会出现警告:因此我们在进行组件双向绑定时,不能直接绑定给 ...

VUE父子组件-传数据的理解

VUE父子组件-传数据的理解相关推荐

最新文章

热门文章