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.子组件传数据给父组件(这里 ...
随机推荐
- 实现一个算法，寻找字符串中出现次数最少的、并且首次出现位置最前的字符 如"cbaacfdeaebb"，符合要求的是"f"，因为他只出现了一次（次数最少）。并且比其他只出现一次的字符（如"d"）首次出现的位置最靠前。
实现一个算法,寻找字符串中出现次数最少的.并且首次出现位置最前的字符如"cbaacfdeaebb",符合要求的是"f",因为他只出现了一次(次数最少).并且比其 ...
- TestNG参数
dependsOnMethods可以使测试用例按某个特定的顺序执行 实例: @Test(dependsOnMethods=“s”) public void a() System.out.print ...
- 面试题：js如何渲染十万条数据并不卡住界面
这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次. ...
- Python生成gexf文件并导入gephi做网络图分析
Gephi是一款优秀的复杂网络分析软件,支持导入多种格式的文件.gexf格式是Gephi 推荐的格式,基于 XML.本文是一个用python写的简单Demo,示例如何生成一个典型的gexf格式文件.代 ...
- Java之集合(二)ArrayDeque
转载请注明源出处:http://www.cnblogs.com/lighten/p/7283928.html 1.前言 上章讲解了Java中的集合接口和相关实现抽象类,本章开始介绍一些具体的实现类,第 ...
- Spring Security构建Rest服务-0801-短信验证码发送
实现短信验证码登录 开发短信验证码接口 校验短信验证码并登录 短信验证码和图片验证码开发思路类似: 1,我们访问一个controller 2,在controller里调用短信验证码生成接口生成验证码 ...
- .Net WEB 程序员需要掌握的技能
原文链接:http://deshui.wang/%E6%8A%80%E6%9C%AF/2015/05/12/net-study-road 基础部分 C# 基础语法 OOP的概念,面向对象的理解 继承 ...
- Android_ActionBar
ActionBar actionBar = getActionBar(); actionBar.setDisplayHomeAsUpEnabled(true);//在activity title栏的左 ...
- Python -- Windows编程 -- 注册表
1.查询开机自启项 startUp.py import re import win32api, win32con def GetValues(fullname): #分割出基本项name[0] nam ...
- 数据库学习---SQL基础(一)
数据库学习---SQL基础(一) 数据库学习---SQL基础(二) 数据库学习---SQL基础(三) SQL(struct query language)结构化查询语言:一种专门与数据库通信的语言, ...