Vue2的组件props通信方式

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

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

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

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

 props: [
'checkType' // 当前checkBox的状态,选中还是未选中
],
data () {
return {
myCheckType: this.checkType
}
}

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

 watch: {
checkType (val) {
this.myCheckType = val
}
}

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

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

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

<form_list :checkType="test.checkType" @changeType="toggle"></form_list>
 data () {
return {
test: {
checkType: false
}
}
},
methods: {
toggle (data) { // data--子组件传递的值
this.test.checkType = data
}
}

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. Linux运维利器之ClusterShell

    一.简介 实验室机房有大概百台的服务器需要管理,加上需要搭建Hadoop以及Spark集群等,因此,一个轻量级的集群管理软件就显得非常有必要了.经过一段时间的了解以及尝试,最终选择了clustersh ...

  2. Python3.7.1学习(五) 将列表中的元素转化为数字并排序

    # 本文实例讲述了Python中列表元素转为数字的方法.分享给大家供大家参考,具体如下: # 有一个数字字符的列表: numbers = ['2', '4', '1', '3']print(numbe ...

  3. 力扣(LeetCode)缺失数字 个人题解

    给定一个包含 0, 1, 2, ..., n 中 n 个数的序列,找出 0 .. n 中没有出现在序列中的那个数. 示例 1: 输入: [3,0,1] 输出: 2 示例 2: 输入: [9,6,4,2 ...

  4. cn_windows虚拟机配置

    1.打开“VMware”,点击“主页”,点“创建新的虚拟机”: 2.会弹出一个“新建虚拟机向导”,类型选择“典型”,点击“下一步”: 3.选择“稍后安装操作系统”,点击“下一步”: 4.选择“Micr ...

  5. 使用C#+FFmpeg+DirectX+dxva2硬件解码播放h264流

    本文门槛较高,因此行文看起来会乱一些,如果你看到某处能会心一笑请马上联系我开始摆龙门阵 如果你跟随这篇文章实现了播放器,那你会得到一个高效率,低cpu占用(单路720p视频解码播放占用1%左右cpu) ...

  6. Mac 下安装并配置 Tomcat

    1,下载 点击 官网 ,进入下载页面, 2,安装 解压出来,即安装完成. 移动解压后的文件,换个文件目录(方便集中管理),将它改个名字(毕竟名字太长了). 我将其改名为 tomcat9 ,移入资源库目 ...

  7. vue项目中安装使用vux

    vux是个vue的移动端框架. 目前移动端UI框架这么多,为啥选择vux呢?vux虽然说是个个人维护项目,但是有15000+个star,应该不比其他的团队开源框架差. 最重要的是,目前要做微信公众号和 ...

  8. 用PHP实现一个简易版文件上传功能(超详细讲解)

    1. php简化版的图片上传(没有各种验证) 1 2 3 4 <form action="" enctype="multipart/form-data" ...

  9. oracle中两个服务器连接中sys密码修改问题

    问题描述:orcl服务器要连接orclstd 想要sqlplus sys/410526@orclstd as sysdba 连接orclstd数据库,但是发现啥意思密码不对,就对sys密码进行重新设置 ...

  10. Redis集群同步问题

    之前被面试官问到:Redis集群中主从数据同步是从库异步读取主库,那么Redis集群其他主与主之间的数据是怎么共享的呢?或者说是怎么同步的? emmmm……当时我就懵逼了,这不是考试范围啊卧槽~只能老 ...