Vue2的组件props通信方式

在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能被动接收组件外传递过来的数据,并且在组件内,不能修改由外层传来的props数据。

比如要实现一个这样的开关

1.父组件通过props将初始的值传到子组件

2.子组件接收到初始值后,创建一个副本数据(由于从父组件直接获取到的props不能更改,data中的数据可以更改,这才创建一个可以更改数据的副本)

  1. props: [
  2. 'checkType' // 当前checkBox的状态,选中还是未选中
  3. ],
  4. data () {
  5. return {
  6. myCheckType: this.checkType
  7. }
  8. }

3.子组件创建一个监听,在从父组件传来的值改变的时候,重新给副本数据赋值

  1. watch: {
  2. checkType (val) {
  3. this.myCheckType = val
  4. }
  5. }

4.子组件绑定改变事件,在触发改变的时候,改变副本数据的值,并将改变后的值$emit给父组件

  1. <img src="../../assets/images/icon_checkbox1_32^.png" @click="toggle">
  1. methods: {
  2. toggle (status) {
  3. this.myCheckType = !this.myCheckType
  4. this.$emit('changeType', this.myCheckType)
  5. const event = window.event
  6. event.stopPropagation()
  7. }
  8. }

5.父组件中监听子组件$emit的事件,将子组件传递的值重新赋值给data

  1. <form_list :checkType="test.checkType" @changeType="toggle"></form_list>
  1. data () {
  2. return {
  3. test: {
  4. checkType: false
  5. }
  6. }
  7. },
  8. methods: {
  9. toggle (data) { // data--子组件传递的值
  10. this.test.checkType = data
  11. }
  12. }

6.在父组件中实现了值得改变,传递到子组件中

7.如果在循环中使用组件,子组件需要接收循环的索引;在子组件向父组件$emit的时候,数据中同时包括索引。

8.父组件能够借助索引将子组件中要传递的数据插入该索引所在的数据集

本文参考如何在Vue2中实现组件props双向绑定

vue实现双向绑定的基础方法的更多相关文章

  1. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  2. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  3. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  4. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  5. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  6. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  7. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  8. vue的双向绑定原理解析(vue项目重构二)

    现在的前端框架 如果没有个数据的双向/单向绑定,都不好意思说是一个新的框架,至于为什么需要这个功能,从jq或者原生js开始做项目的前端工作者,应该是深有体会. 以下也是个人对vue的双向绑定原理的一些 ...

  9. 揭密 Vue 的双向绑定

    Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...

随机推荐

  1. python:类5——Python 的类的下划线命名有什么不同?

    首先是单下划线开头,这个被常用于模块中,在一个模块中以单下划线开头的变量和函数被默认当作内部函数,如果使用 from a_module import * 导入时,这部分变量和函数不会被导入.不过值得注 ...

  2. Yum —— CentOS 下包管理工具 学习笔记

    环境:CentOS 7 (阿里云服务器) 一.linux 发行版下的包管理阵营 包管理系统 除了方便你安装和管理包之外,还能帮你解决依赖问题. 下面就介绍2个最主要的: 1.Debian 系 - dp ...

  3. C# 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”

    “Microsoft.Jet.OLEDB.4.0” 是数据库接口驱动,用来连接数据库的,一般多用于连Access和Excel.我在在winform开发时,在本地运行没有问题,可是部署到另一台服务器上就 ...

  4. linux磁盘分区三步走

    为了便于理解硬盘的物理结构 ,可将硬盘看作一个圆,它是坚硬金属材料制成的涂以磁性介质的盘片,不同容量硬盘的盘片数不等.每个盘有两面,都可记录信息.要了解硬盘的物理结构,需要弄懂磁道.扇区.柱面.簇等几 ...

  5. 深入SQL Server 日期和时间的内部存储

    在SQL Server的内部存储中,日期和时间不是以字符串的形式存储的,而是使用整数来存储的.使用特定的格式来区分日期部分和时间部分的偏移量,并通过基准日期和基准时间来还原真实的数据. 一,DateT ...

  6. 【日常错误】spring-boot配置文件读取不到

    最近在用spring-boot做项目时,遇到自定义的配置文件无法读取到的问题,通过在appcation.java类上定义@PropertySource(value = {"classpath ...

  7. day20190911笔记

    js_访问节点元素_document系列方法: first_jQuery.html <!DOCTYPE html><html> <head> <meta ch ...

  8. 【Android - 控件】之MD - RecyclerView的使用

    RecyclerView是Android 5.0新特性——Material Design中的一个控件,它将ListView.GridView整合到一起,可以使用极少的代码在ListView.GridV ...

  9. react中简单倒计时跳转

    其实在react中实现倒计时的跳转方法有很多中,其中我认为较为好用的就是通过定时器更改state中的时间值. 首先在constructor中设置10秒的时间值: constructor () { su ...

  10. php踩过的那些坑(2) strpos引发的血案

    一.前方有坑 php某些自带函数,如果使用不当,也会坑得你人仰马翻.比如:strpos() 先了解一下strpos()函数是干啥的. strpos — 查找字符串首次出现的位置 用法: int str ...