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 相关文章推荐
javascript document.execCommand() 常用解析
Dec 14 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
JavaScript闭包详解
Feb 02 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
原生JS实现记忆翻牌游戏
Jul 31 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
jQuery实现隔行背景色变色
2014/11/24 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
清洁工个人工作总结
2015/03/05 职场文书
运动会100米加油稿
2015/07/21 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle