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.子组件传数据给父组件(这里 ...
随机推荐
- 如何在Qt资源文件中包含和释放exe等各种类型文件？
操作系统:Windows 10 X64 企业版 Qt: 5.8.0 QtCreater: 4.2.1 刚刚开始学习Qt,不断遇到困难和挑战,前几天在各个QQ群里询问如何在Qt的资源文件中包含和释放ex ...
- Qt使用gtest进行C++单元测试-01
环境: win7/win10+qt5.8.0(MinGW), 1.gtest获取: 从:https://www.bogotobogo.com/cplusplus/google_unit_test_gt ...
- Django(完整的登录示例、render字符串替换和redirect跳转)
day61 1. 登录的完整示例 复习: form表单往后端提交数据需要注意哪三点: 五一回来默写 <-- 谁写错成from谁 ...
- (1)RGB-D点云生成
bin文件夹下为生成的可执行文件generate_cloud,执行时和data文件放在同一文件夹下. 图像数据来自小觅相机. src下的源码,包括generatePointCloud.cpp和CMak ...
- 一，php的错误处理和异常处理
php程序中如果语法或逻辑错误,会引起php默认错误处理机制,不会引起异常处理机制,只有在程序中throw抛出异常后,如果没有catch捕捉异常,默认调用php默认异常处理. php有默认错误机制和默 ...
- Jira API传字符串的换行问题 （文本编辑器使用）
因为jira的文本编辑器自动进行了2次转义,如果从API过来的文本换行需要手动处理.吐血. net里: desc = desc.Replace("\n", "\\n&qu ...
- 【Java】java运行jar时，报 java.lang.UnsupportedClassVersionError
问题现象: java运行jar时,报 java.lang.UnsupportedClassVersionError java -jar main.jar -h 192.168.221.171 - ...
- Netty核心概念(5)之Channel
1.前言 上一节讲了Netty的第一个关键启动类,启动类所做的一些操作,和服务端的channel固定的handler执行过程,谈到了不管是connect还是bind方法最终都是调用了channel的相 ...
- python中map()函数
map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. map()是 Python 内 ...
- scala combineByKey用法说明
语法是: combineByKey[C]( createCombiner: V => C, mergeValue: (C, V) => C, mergeCombiners: ( ...