-
Vue 子组件向父组件传递数据,父组件更新数据后,子组件模板第一次更新,之后不再更新 问题解决方案
2021-01-09 15:38:34子组件向父组件发送数据 //子组件文本框 <input type="text" class="num" :value="item.num" @blur="changeNum(item.id,$event)" maxlength="2"/> //maxlength="2" 将数据限制在两个字符内,初步限制不会超过99...如题
需求:- 将input 限制在 1-99 之间
子组件向父组件发送数据
//子组件文本框 <input type="text" class="num" :value="item.num" @blur="changeNum(item.id,$event)" maxlength="2"/> //maxlength="2" 将数据限制在两个字符内,初步限制不会超过99 //向父组件传递数据 methods: { changeNum(id, $event) { this.$emit('change-num', { id, num: $event.target.value, type: 'change', }); }, }
父组件对数据的处理
//子组件的使用 <shop-cart-list :list="list" @list-del="listDel($event)" @change-num="changeNum($event)"></shop-cart-list> //对数据的处理 methods: { changeNum(val) { if (val.type == 'change') { this.list.find((item) => { if (item.id === val.id) { //将数据进行了处理,不能为非数字或者 <= 0,如果是就赋值为 1 val.num > 0 ? val.num : (val.num = 1); //解决方案就是将父组件的数据进行改变,在重新赋值,数据改变,页面重新更新 val.num == item.num ? (item.num = 999) : ''; this.$set(item, 'num', val.num); } }); } } }
大致思路:
当子组件连续多次传递非法的数据,会导致子组件的数据和父组件的数据一致,数据不变化页面不更新,而我的页面没有使用v-model进行双向绑定,而是使用的:value来控制页面的数据显示,所以页面显示的是当前输入的非法数据,没有改变。后面了解到官方提供了解决方案:
changeCount() { let val = +parseInt(this.$refs.input.value); if (val < 1 || !val) val = 1; // 这个函数是用来强制更新用的,用了这个问题就解决了 this.$forceUpdate(); this.$emit('changeCount', val); },
-
vue子组件向父组件同步数据
2020-05-15 11:35:07并且这个值,在父组件中更新后,同样会触发子组件更新。 子组件: <template> <div> 子组件展示父组件传入的值:{{timer}} </div> </template> <script> export default { name...1、props
在vue中,父组件,可以将值传递给子组件。并且这个值,在父组件中更新后,同样会触发子组件更新。
子组件:
<template> <div> 子组件展示父组件传入的值:{{timer}} </div> </template> <script> export default { name: "child", props:['timer'], } </script>
父组件:
<template> <div> <h2>父组件中的值:{{fTime}}</h2> <!-- 使用子组件 --> <child v-bind:timer="fTime"></child> </div> </template> <script> // 导入子组件 import childchild from "../components/childchildchild.vue"; export default { name: "father", components: { child, }, data(){ return{ fTime:new Date().getTime() } }, created() { // 周期性更改父组件中的值 // 子组件同步进行修改 setInterval(() => { this.fTime = new Date().getTime(); }, 2000) }, } </script>
该种方式,是能将值,从父组件,传递给子组件,而不能逆向传递。如果子组件中的值发生了更改,不会触发父组件刷新视图。
2、子组件向父组件传递值
如果希望通过子组件,来改变父组件的值,有这样两种方式:
- 通过定义全局的事件,父组件进行监听,子组件进行触发,然后更改的值通过事件参数进行传递
- 给子组件设置一个自定义的事件,子组件触发,然后父组件获取事件参数
子组件:
<template> <div> 子组件展示父组件传入的值:{{timer}} <button @click="changeTime">子组件中,改变timer 的值</button> </div> </template> <script> export default { name: "child", props:['timer'], methods:{ changeTime(){ this.$emit('setTime',new Date().getTime()) } } } </script>
父组件
<template> <div> <h4>父组件中的值:{{fTime}}</h4> <child v-on:setTime="setTimeHandle" v-bind:timer="fTime"></child> </div> </template> <script> import child from "../components/child.vue"; export default { name: "child", components: { child, }, data() { return { fTime: new Date().getTime(), } }, methods: { setTimeHandle(e){ console.log(e) this.fTime = e; }, }, } </script>
点击按钮时,会触发自定义事件,并且将希望改为的值,通过自定义事件传递给父组件,父组件重新复制,会触发子组件刷新
3、
.sync
修饰符在 vue 2.3 中,为了提供更高效的开发方式,对子组件向父组件通信进行了封装(2 中代码)。使用
.sync
语法糖,代替了原本需要些一大堆的事件监听模式。在子组件中,使用
this.$emit("update:属性名",新值);
来对props 里面被.sync
修饰的值进行修改。在父组件中,
<child v-bind:属性名.sync="属性值"></child>
,使用 b-bind 配合 sync 修饰符子组件:
<template> <div> 子组件展示父组件传入的值:{{timer}} </div> </template> <script> export default { name: "floatMenu", props:['timer'], mounted() { setInterval(()=>{ this.$emit("update:timer",new Date().getTime()); },2000) }, } </script> <style scoped> </style>
父组件:
<template> <div> <h4>父组件中的值:{{fTime}}</h4> <child v-bind:timer.sync="fTime"></child> </div> </template> <script> import child from "../components/child.vue"; export default { name: "father", components: { child, }, data() { return { active: "index", fTime: new Date().getTime(), } }, } </script>
-
vue子组件监听父组件的值同步更新数据
2019-03-01 09:49:07子组件 props : [“data”], 子组件监听 watch:{ data : (n ,o) => {//箭头函数 不然会发生this改变 console.log(n.img) this.imgs = n.img } }子组件
props : [“data”],子组件监听
watch:{ data : (n ,o) => {//箭头函数 不然会发生this改变 console.log(n.img) this.imgs = n.img } }
-
vue 子组件和父组件数据交互
2020-12-21 14:46:46在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:.sync和自定义v-model 1、.sync属性 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式:子组件props属性名.sync 子组件向上弹射事件...在子组件中更新props中的属性值,并且更新到父组件,有两种实现方式:
.sync
和自定义v-model
1、.sync属性
- 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式
:子组件props属性名.sync
- 子组件向上弹射事件给父组件时,事件名必须为格式
update:props属性名
父组件
<template> <div id="app"> // 注意点一、:show后跟修饰符.sync // 等同于<my-componen :show="child" @update:show="val => child= val" /> <my-component :show.sync='child' /> </div> </template> <script> export default { data(): { return {child: false} } } </script>
子组件
<template> <h3>{{show}}</h3> <button @click="eventOn">子组件事件</button> </template> <script> export default { props: { show: { type: Boolean, default: false} } , methods: { eventOn() { // 注意二、事件名必须为update:属性名 // 更改prop中的属性show的属性值,同时更新父组件中中child的属性值 this.$emit('update:show', false); } } } </script>
2、v-model应用
- 子组件定义的属性名必须为
value
- 父组件向上弹射事件给子组件时,事件名必须为
input
父组件
<template> <div id="app"> // 等同于<my-componen :value="child" @input="val => child= val" /> <my-component :value='child' /> </div> </template> <script> export default { data(): { return {child: false} } } </script>
子组件
<template> <h3>{{value}}</h3> <button @click="eventOpt">子组件事件</button> </template> <script> export default { props: { // 注意点一、属性名必须为value value: { type: Boolean, default: false} } , methods: { eventOpt() { // 注意二、事件名必须为input // 更改prop中的属性value的属性值,同时更新父组件中中child的属性值 this.$emit('input', false); } } } </script>
比较
v-model
子组件只能更改props中的一个属性值value;样例第二种.sync
子组件可以更改props中的多个属性值; - 父组件在给子组件传值时,属性名后需要加修饰符.sync,格式
-
Vue 子组件与父组件之间的 双向数据绑定
2019-05-21 15:16:52方法一(常规) 父组件传递数据到子组件; 子组件将数据转成本地数据 props: ['name'], data() { return { ...所以要监听父组件传入数据的变化,随之更新子组件; watch: { // 监听父组件传... -
vue子组件频繁向父组件传值,父组件未更新数据
2019-12-27 17:59:00子组件频繁向父组件传值,父组件未更新数据 在实际项目中,我们经常遇到这种情况就是父子组件互相通信。 举例:图片上传组件,上传多张图片时,只在页面展示第一张图片,其余不展示,这时并不是所有的数据绑定问题,... -
Vue 子组件修改父组件值的解决方法
2020-10-21 22:51:30此外,每次父组件的数据发生更新时,子组件的值都会更新到最新的数据,但不能直接在子组件内部改变prop(父组件传过来的值),否则浏览器就会发出警告 但我们可能会遇到,需要在子组件修改父组件值的需求,这里... -
vue父组件数据更新,子组件没有变化。
2019-09-23 10:25:19vue父组件数据更新,子组件没有变化。 在父子组件传参时,父组件将值传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,过一段时间后重新赋值,则发现子组件里面数据没有更新,这个时候需要在子组件... -
vue 父组件、子组件对象改变_VUE里子组件获取父组件动态变化的值
2020-12-24 03:20:46在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态。场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的... -
vue 父组件获取接口值传到子组件_Vue父组件异步获取数据传给子组件
2020-12-19 21:14:30在vue构建页面的顺序为,父组件构建 → 子组件构建 → 父组件获取异步数据 → 子组件获取父组件异步数据 → 子组件更新,也就是说构建的时候生命周期只会执行一次。父组件:父组件:获取数据import child from './... -
vue 子组件给父组件传值_vue组件引用传值的最佳实践
2020-12-12 03:31:49准备:单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向... -
关于vue子组件改变父组件传递的值的问题
2019-03-26 11:38:03正常对于vue父子组件来说子组件是不能改变父组件props过来的值的,但是今天在做项目的时候发现了...子组件直接改变父组件props过来的对象是可以直接更新父组件的数据的而且不会报错。 子组件: <template> ... -
vue 父刷新子_vuejs从子组件更新父数据
2021-01-14 07:04:58在您的特定情况下,可以将自定义组件与一起使用v-model。这是一种特殊的语法,允许进行接近双向的绑定,但实际上是上述事件驱动架构的简写形式。这是一个简单的示例:Vue.component('child', {template: '#child'... -
vue父组件数据更新子组件相关内容未改变(watch解决)
2020-04-29 22:57:37vue父组件数据更新子组件相关内容未改变 父组件 在父组件中,根据后台给的数据(数组),v-for生成子组件 <div class="exist"> <existProject :itemprop="item" v-for="(item, index) in getData" :... -
Vue 子组件修改父组件对象未保存,导致父组件值被修改问题
2019-02-13 11:46:31传值(对象或者数组)到子组件,在编辑页面修改原来的值由于v-model的绑定,我们修改是会直接影响原来的值,当我们取消编辑的时候,这个时候应该是数据变为未编辑之前的值,而当我们确定保存时,父组件中的数据应该... -
vue 父组件获取接口值传到子组件_vue父组件异步获取数据传给子组件的方法
2020-12-19 21:14:30但是现在问题是父组件的数据是异步获取...但是这还不够完美,子组件一般不直接使用父组件传来的值,二是监听一下,然后有变化了的时候再赋值给data,渲染的时候用data里的数据,这样就能保证随时动态更新数据props:... -
vue子组件提交接口,刷新父组件数据
2020-01-19 18:18:37当在子组件里更改了某些信息且关闭子组件后,需要父组件更新修改后的内容,操作如下: 1、$emit触发 父组件 @update="update(val)" 子组件 this.$emit('update', newVal) 2、使用$parent触发父组件 更新数据是... -
vue 父组件数据更新后子组件不变_vue知识点总结(2)
2020-11-25 04:52:45生命周期篇1.生命周期四个阶段初始化 (create)--- 组件挂载(mount)-----组件更新 (update)...父组件和子组件之间的生命周期执行顺序组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子... -
vue父组件夏多个子组件,子组件分别修改后其他子组件如何同步更新数据?
2019-02-26 14:25:57获取到父组件数据 ``` props: { teacherData: { type: Object } }, ``` -------------------补充------------- 然后子组件向父组件传值 ``` this.$emit('success',false); ``` ``` ... -
vue父组件传子组件数据不更新视图的方法
2020-12-17 17:42:55有时候需要父组件请求接口,然后把数据传递给子组件,页面渲染出来了,接口数据后面才返回出来,这样子组件就不是最新数据,导致页面数据显示错误。 props: { file_list: { type: Array, default() { return [] ... -
vue 父组件向子组件传值,但子组件未更新
2020-04-17 11:31:47今天碰到一个vue的问题,父组件向子组件传值,在子组件可以打印出接收到的值,但是,子组件没有显示: 两个可能: 1,组件未渲染; 2, 组件渲染了。只是数据是空值,新数据传过来,没有重新渲染; 第一种情况可以... -
vue 父组件数据更新后子组件不变_vue知识汇总-2
2020-11-21 04:09:26View 代表UI 组件,它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。在MVVM架构下,View ... -
vue子组件传参给父组件
2018-02-28 11:10:00我们要实现的效果是:在子组件的Input框输入,父组件中实时更新显示。(也就是把子组件中的数据传给父组件) 一、子组件代码 template部分 <template> <section> <input v-model="message"/... -
vue父组件监听子组件数据更新(hook)
2021-01-16 10:15:57// 父组件 <template> <div class="father"> <son @hook:update="sonUpdateFun"/> // 我是子组件 </div> </template> <script> import son from './son.vue' export default { components:{ 'son' }, ...
收藏数
491
精华内容
196
-
peewee的使用与异步peewee-async在tornado中的使用总结
-
MySQL 多实例安装 及配置主从复制实验环境
-
java运算符
-
Vue引入版本crypto-js.js
-
工厂模式
-
如何使用CSDN-markdown编辑器
-
Android学习之Fragment创建方式
-
MySQL Router 实现高可用、负载均衡、读写分离
-
简单编程小游戏,随机炸弹
-
2021-02-27
-
(4) 文本
-
daxigua-master.zip
-
C#远程调用其他模块
-
pci-express3-device-architecture-optimizations-idf2009-presentation.pdf
-
grafana+influxdb+jmeter.json
-
二、数组2(排序算法补充-对比数据结构课程二三章)
-
送别2020年,对HJ-3D心理数字沙盘客户发放意见调查表
-
NFS 网络文件系统
-
2021年 系统分析师 系列课
-
DHCP 动态主机配置服务(在Linux环境下,配置单网段或跨网段提)