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.子组件传数据给父组件(这里 ...
随机推荐
- Android------------------的资源文件的学习
一.style的学习 用法: 使用: 使用系统自带的style的风格 使用: 效果: 二.drawable的使用 selector是一个xml文件进行加载使用的: 文件名叫做buttonselecto ...
- hdoj1575 Tr A（矩阵快速幂）
简单的矩阵快速幂.最后求矩阵的秩. #include<iostream> #include<cstring> using namespace std; ; int n,k; s ...
- [JS深入学习]——数组对象排序
(转) JavaScript实现多维数组.对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序. sort() 方法用于对数组的元素进行排序.语法如下: arrayObject. ...
- js有关数组的函数
map()和filter()函数 js的数组迭代器函数map和filter,可以遍历数组时产生新的数组,和python的map函数很类似1)filter是满足条件的留下,是对原数组的过滤(筛选):2) ...
- liunx相关指令
修改网卡命名规范 a 如何进入到救援模式 修改网卡 1.修改配置文件名称 /etc/sysconfig/network-scripts/ 名称为:ifcfg-xxx 2.修改配置文件内的 dev ...
- 使用json-lib-*.jar的JSON解析工具类
使用json-lib-2.4-jdk15.jar JSON工具类: import java.util.List; import net.sf.json.JSONArray; import net.sf ...
- WSGI学习系列WebOb
1. WSGI Server <-----> WSGI Middleware<-----> WSGI Application 1.1 WSGI Server wsgi ser ...
- Filter应用之-自动登录
自动登录,是为了帮助用户多次使用这个网页时,不用再次输入用户名和密码就可以登录. 是指用户将用户的登录信息,人,保存到本地的文件中Cookie中. Name,value – 声明时 new Cooki ...
- Centos下Kubernetes+Flannel部署（新）
一.准备工作 1) 三台centos主机 k8s master: 10.11.151.97 tc-151-97 k8s node1: 10.11.151.100 tc-151-100 k8s no ...
- #pragma的一些用法
1.#pragma message message 参数:Message参数能够在编译信息输出窗口输出相应的信息,这对于源代码的信息控制特别重要,其使用方法为: #pragma message(&qu ...