vue2.x---在vue2.x中,父组件怎么响应式向子组件传值,子组件怎么通过prop修改父组件数据?
来源:互联网 发布:蚂蚁活多久 知乎 编辑:程序博客网 时间:2024/05/01 20:02
从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。
这是目前vue最新版文档描述,子组件修改父组件状态的方法。
包括两部分代码填充:
- 父组件
<comp :foo="bar" @update:foo="val => bar = val"></comp>
- 子组件:
this.$emit('update:foo', newValue)
实例中如下:
child.vue
<template> <div @click='change'>{{number}}</div></template><script> export default{ props:['number'], methods:{ change(){ let newNumber=number?0:1; this.$emit('update:number',newNumber); } ] }</script>
father.vue
<temlate> <div> <v-child :number='faterNumber' @update:number='val=>fatherNumber=val'></v-child> <p>{{faterNumber}}</p> </div></template><script> import v-child from './child'; export default{ data(){ return{ fatherNumber:1 } }, components:{v-child} }</script>
子组件中的div点击触发change事件,通过this.$emit进行触发父组件的状态更改,这样number便在0与1之间切换
阅读全文
1 0
- vue2.x---在vue2.x中,父组件怎么响应式向子组件传值,子组件怎么通过prop修改父组件数据?
- vue2 子组件调用父组件中data中的值
- vue---vue2.x中父组件如何触发子组件事件方法?
- Vue2.0 子组件传值给父组件
- vue2.0子组件调用父组件的数据
- vue2.0子组件调用父组件的数据
- vue2.0 子组件改变props值,并向父组件传值
- vue-prop父组件向子组件进行传值
- Vue2.x父组件与子组件之间的双向绑定
- Vue2.0子父组件通信
- Vue2.0子父组件通信
- Vue2.0子父组件通信
- 在vue2.0中父组件如何触发子组件的自定义方法?
- 在vue2.0中父组件如何触发子组件的自定义方法?
- vue2中子组件修改父组件传入的prop,并向父组件$emit一个广播事件
- vue2 子组件调用父组件中的方法
- 子组件向父组件传值
- vue2.0 子组件和父组件之间的传值
- 科技发展推动智慧环卫,有望破解行业难题?
- js的练习题(1)
- NYOJ138
- 【Python3.6爬虫学习记录】(五)Cookie的使用以及简单的爬取知乎
- 设置图片圆角边框
- vue2.x---在vue2.x中,父组件怎么响应式向子组件传值,子组件怎么通过prop修改父组件数据?
- java之简单的回文算法
- hdu 5256 LIS变形
- JQuery
- C#控件之ImageList
- 接口自动化
- File文件递归复制
- redis---内部结构--skiplist
- 微信朋友圈能否吃掉微博?