vue 实现父组件和子组件之间的数据双向绑定
前言：vue 实现父组件给子组件传值，然后子组件可以修改回父组件的值。vue 的 prop 默认是单向数据绑定，但是偶尔需要双向绑定，这时就需要知道如何才能让子组件的数据修改时影响到父组件的数据。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9304449.html
网站地址：我的个人vue+element ui demo网站
github地址：yuleGH github (喜欢记得star哦)
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定。
要点：
在子组件的 data 中创建一个props属性的副本
watch props 中的属性 目的是为了同步父组件对 props 的修改
watch 属性副本，emit一个函数通知到组件外，目的是为了同步子组件对属性的修改。这时利用了.sync，所以可以使用 this.$emit("update:name", newVal); 这种形式。
直接上 Demo：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/> <html> <head>
<title>测试</title>
</head>
<body>
<div id="app">
<input id="val1" v-model="value1">
<button @click="clickBtn">点击打印</button>
<component-input :name.sync="value1"></component-input>
</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script> <script type="text/javascript">
var componentInput = {
template : "<div>子组件<input v-model='curName'></div>",
data : function(){
return {
curName : this.name
}
},
props : ['name'],
watch : {
'name' : function(newVal, oldVal){
this.curName = newVal;
},
curName : function(newVal, oldVal){
this.$emit("update:name", newVal);
}
}
}; new Vue({
el: "#app",
data: {
value1: ""
},
components : {
'component-input' : componentInput
},
methods: {
clickBtn: function () {
console.log(this.value1);
}
}
});
</script> </body> </html>
转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9304449.html
vue 实现父组件和子组件之间的数据双向绑定的更多相关文章
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- Vue数据双向绑定探究
前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...
- vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- vue学习之父组件与子组件之间的交互
1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...
随机推荐
- 记一次生产发版时SpringBoot服务停用启用的问题
近期项目交接,接手了个SpringBoot项目.生产环境里,jar包是通过软链接做成linux服务来启动和停用. 然而,每次通过jenkins构建发版,项目构建完毕,还要手动再去重启服务. 听交接的同 ...
- Qt5学习笔记（基础）
按钮 #include <QApplication> /*应用程序抽象类*/ #include <QWidget> //窗口类 #include <QPushButton ...
- java 中什么是aop
AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.OOP引入 ...
- string的相关问题
http://blog.csdn.net/seu_calvin/article/details/51404589 http://rednaxelafx.iteye.com/blog/774673 ht ...
- 如何查看linux服务器的版本和配置信息
linux下看配置,可没有windows那么直观.你只能一个一个查看. 一:cpu[root@srv /]# more /proc/cpuinfo | grep "modelname&quo ...
- 企业IM (或业务系统）web api的json格式设计思考（原创）
在企业IM开发中,经常用到和业务系统的数据交换,在中国企业最常见的比如组织架构变更,一般在客户端加密保存了组织架构树(便于快速的查询和树展示),当HR或OA或AD域这些管控企业组织架构的数据发生改变, ...
- 【2018北京集训十二】 coin 矩阵快速幂
矩阵快速幂原来还可以这么用?? 你们城里人还真会玩. 我们令$f[i][j][k]$表示总的钱数为i,当前使用的最大面值硬币的面值为$v_j$,最小为$v_k$的方案数量. 不难发现$f[i][j][ ...
- POJ 1102
#include<iostream>// cheng da cai zi 11.14 using namespace std; int main() { int i; int j; int ...
- 一文详解python的类方法，普通方法和静态方法
首先形式上的区别,实例方法隐含的参数为类实例self,而类方法隐含的参数为类本身cls. 静态方法无隐含参数,主要为了类实例也可以直接调用静态方法. 所以逻辑上,类方法被类调用,实例方法被实例调用,静 ...
- vue 中使用 screenfull.js 全屏插件
参考网址: https://blog.csdn.net/houyibing930920/article/details/89214200 https://www.jianshu.com/p/cfbb1 ...