Vue父子组件传值.sync
传统的父子组件之间传值,父组件通过 :变量=“xxx”将值传给子组件,子组件通过props进行接收。但是子组件只有读的属性,不可以对数据进行更改,所以$emit传回父组件,由父组件对数据进行修改
//父组件
<template><div class="content"><btn :btnName='num' @changeFn= changeFn></btn></div>
</template>子组件
export default {name: 'btn',props: {btnName:{type : [String,Number],required: true}},methods: {changeNum(){this.$emit('changeFn',888)}},
}
.sync 相当于上面的父子组件传值简写 父子双向传值语法糖
父组件在传入子组件的数据后加上.sync 不需要在对子组件的$emit进行接收
<template><div class="content"><btn :btnName.sync='num' ></btn></div>
</template>
子组件$emit传回的不再是函数 而是 update:父组件传过来的变量名称
<script>
export default {name: 'btn',props: {btnName:{type : [String,Number],required: true}},methods: {changeNum(){this.$emit('update:btnName',888)}},
}
</script>
总的来说,.sync 使得父组件少走了处理 $emit的那一步
Vue父子组件传值.sync相关推荐
- vue父子组件传值:详解父组件向子组件传值(props)
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...
- vue父子组件传值之 $emit和props
vue父子组件传值之 $emit和props 前言 子组件向父组件传值 父组件向子组件传值 前言 在进行vue的项目中,我们难免会需要父子组件之间进行传值,父子组件传值可以通过 $emit和props ...
- vue父子组件传值的一些坑(深浅拷贝)
本文章转载:https://www.yht7.com/news/116487 1.问题描述 父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使 ...
- Vue父子组件传值----$emit子传父
Vue父子组件传值是个比较经典的问题,在这里,咱们先谈一下,子组件给父组件传值. 这是一个子组件 <!-- 子组件1 --> <template><div class=& ...
- vue父子组件传值之异步之后子组件无法拿到父组件传的值
在vue中父子组件传值是非常常见的,父组件给子组件传值使用的是props,子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值,在这里我们介绍的是子组件在异步请求回来的参数无法 ...
- vue 父子组件传值
父子组件传值 最常用的方法(4种) 1 . 父组件 传递数据 给子组件(props)vue官方文档 特别注意!!特别注意!!特别注意!! props传值的类型如果是Object类型,如对象,数组等,传 ...
- 快速理解Vue父子组件传值
组件化开发是目前前端开发必备的开发技能,组件化开发可以大大提高开发效率 今天整理一下Vue的父子组件传值方式,方便还没有理解的朋友学习. 1.父组件向子组件传值 <!-- 父组件 --> ...
- VUE父子组件传值(含实例)
vue父子组件通信 这里的movies数组和message字符串,相当于是在父组件中对要传给子组件的数据做赋值或者计算等操作. 1.父传给子(在子组件中改数据) 父组件: 1.在子组件上绑定数据arr ...
- Vue父子组件传值问题
今天在编写vue子组件时遇到的两个问题来分享以下 父子组件传值问题 父组件 <md-editor ref="mdEditor" :text="form.conten ...
最新文章
- ios收货地址三级联动选择
- Java XML解析器
- 全球及中国陶瓷承烧板行业发展态势及运营前景研究报告2021-2027年版
- k8s部署ingress:使用heptio-contour部署ingress controller(通过sealos安装,非nginx-ingress类型)
- 简单区分Vmware的三种网络连接模式(bridged、NAT、host-only)
- 关于 Orbeon form PE 版本 Unauthorized 错误消息
- 1079 Total Sales of Supply Chain(甲级)
- native下拉图片放大 react_RN下拉图片放大 - Chason-洪的个人空间 - OSCHINA - 中文开源技术交流社区...
- java 网络实验_java网络聊天室实验
- ant使用ftp上传数据时配置的一个报错问题
- 分治法 —— 快速排序和归并排序(自底向上和自顶向下)
- postman rpc本地调用_什么是RPC,你知道嘛?
- 2023-2029年中国拼团游行业市场运行态势及发展趋向分析报告
- 使用 TICS Pro 配置时钟芯片
- 【计算机数学】二次规划(QP)问题
- Python中inplace、subset参数的意义
- mysqldump实战-问题2
- Joystick Shield 连接 nRF24L01
- 联想笔记本电脑休眠后无法唤醒的解决方法
- 支付宝免签,个人支付宝,自动转账,自动提现到银行卡,自动银行卡转账
热门文章
- go每日新闻(2021-06-22)——毛老师的管理之道
- 赤峰查号录-针对赤峰地区的综合类信息服务平台
- 苹果2021年第一季度推出新款 iPad Pro
- java分享到空间_java 空间
- 智慧旅游垂直入口__游侃天下(一)
- Java笔记02:类型转换,“有灵气”的数据类型。
- 什么是容器(docker)
- Android Native Hook
- 西门子S7-200 SMART如何实现远程监控并通过手机自动报警
- java defunct_神奇的Java僵尸(defunct)进程问题排查过程