vue中如何让子组件修改父组件数据


Posted in Javascript onJune 14, 2018

一、关于vue中watch的认识

我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候

•1、常见的使用场景

...
watch:{
  value(val) {
    console.log(val);
    this.visible = val;
  }
}
...

•2、如果要一开始就执行

...
watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + '-' + this.lastName;
    },
    immediate: true,
  }
}
...

•3、深度监听(数组、对象)

...
watch: {
  obj: {
    handler(newName, oldName) {
    console.log('///')
  },
  immediate: true,
  deep: true,
}
...

二、关于子组件修改父组件属性认识

在vue2.0+ 后不再是双向绑定,如果要进行双向绑定需要特殊处理。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "你修改的属性名"

•1、通过事件发送给父组件来修改

**在子组件test1中**
<input type="text" v-model="book"/>
<button @click="add">添加</button>
<p v-for="(item, index) of books" :key="index">{{item}}</p>
...
methods: {
  add() {
    // 直接把数据发送给父组件
    this.$emit('update', this.book);
    this.book = '';
  },
},
**在父组件中**
<test1 :books="books" @update="addBook"></test1>
...
addBook(val) {
  this.books = new Array(val)
},

•2、使用.sync 来让子组件修改父组件的值(其实是上面方法的精简版)

**在父组件中,直接在需要传递的属性后面加上.sync**
<test4 :word.sync="word"/>
**在子组件中**
<template>
  <div>
    <h3>{{word}}</h3>
    <input type="text" v-model="str" />
  </div>
</template>
<script>
export default {
  props: {
    word: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      str: '',
    }
  },
  watch: {
    str(newVal, oldVal) {
      // 在监听你使用update事件来更新word,而在父组件不需要调用该函数
      this.$emit('update:word', newVal);
    }
  }
}
</script>

•3、在子组件中拷贝一份副本

**子组件中**
export default {
  props: {
    // 已经选中的
    checkModalGroup: {
      type: Array,
      default: [],
      required: false,
    }
  },
  data() {
    return{
      copyCheckModalGroup: this.checkModalGroup, // 选中的
    }
  },
  methods: {
    // 一个一个的选择
    checkAllGroupChange(data) {
      // 把当前的发送给父组件
      this.$emit('updata', data);
    },
  },
  watch: {
    checkModalGroup(newVal, oldVal) {
      this.copyCheckModalGroup = newVal;
    }
  }
}
**父组件中直接更新传递给子组件的数据就可以**
...
// 更新子组件数据
roleCheckUpdata(data) {
  this.roleGroup = data;
},
...

总结

以上所述是小编给大家介绍的vue中如何让子组件修改父组件数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
JavaScript 拾漏补遗
Dec 27 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 #Javascript
MVVM框架下实现分页功能示例
Jun 14 #Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 #jQuery
React 组件间的通信示例
Jun 14 #Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 #Javascript
详解React中setState回调函数
Jun 14 #Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 #Javascript
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
如何在PHP中读写文件
2020/09/07 PHP
js 操作css实现代码
2009/06/11 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python抓取文件夹的所有文件
2018/02/27 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python搜索包的路径的实现方法
2019/07/19 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
初一生物教学反思
2014/01/18 职场文书
环保建议书100字
2014/05/14 职场文书
运动会演讲稿50字
2014/08/25 职场文书
平面设计师岗位职责
2014/09/18 职场文书
项目验收申请报告
2015/05/15 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书