前言：vue 实现父组件给子组件传值，然后子组件可以修改回父组件的值。vue 的 prop 默认是单向数据绑定，但是偶尔需要双向绑定，这时就需要知道如何才能让子组件的数据修改时影响到父组件的数据。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9304449.html

网站地址：我的个人vue+element ui demo网站

github地址：yuleGH github (喜欢记得star哦)

　　prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定。

　　要点：

  1. 在子组件的 data 中创建一个props属性的副本

  2. watch props 中的属性 目的是为了同步父组件对 props 的修改

  3. 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 实现父组件和子组件之间的数据双向绑定的更多相关文章

  1. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  2. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  3. Vue数据双向绑定探究

    前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...

  4. vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  5. Vue 组件&组件之间的通信 之 父组件向子组件传值

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...

  6. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  7. EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  8. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

  9. vue学习之父组件与子组件之间的交互

    1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...

随机推荐

  1. super()的作用

    super能够用来訪问父类的构造方法和被子类所隐藏的方法.假设子类中有方法与父类中的方法名称和參数同样,则父类中的方法就被隐藏起来,也就是说在子类中重载了父类中的方法. 引用父类中所隐藏的语法格式例如 ...

  2. JS-DOM Element方法和属性

    JS-DOM Element方法和属性 S-DOM Element方法和属性一,获取html元素1.getElementByID(id)通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.e ...

  3. POJ 1126

    #include <stdio.h> #include <string> #include <iostream> using namespace std; int ...

  4. Sublime Text 3快捷键的使用技巧（python）

    Sublime Text 3非常实用,但是想要用好,一些快捷键不可或缺,所以转了这个快捷键汇总. 先拉出来说几个切身体会最常用, Ctrl+Z 撤销. Ctrl+Y 恢复撤销 Alt+Shift+2  ...

  5. jetbrains golang IDE

    非常好的IDE,叫goland. 支持最新的golang1.8了 下载地址: https://www.jetbrains.com/go/ 开始使用手册: https://www.jetbrains.c ...

  6. 使用SharedPreference保存用户数据的步骤

    1. 声明 SharedPreferences sp; 2. 初始化 sp = this.getSharedPreferences("文件名", 0);//0代表的是私有 3. 获 ...

  7. Android 开发工具类 29_sendPOSTRequest

    sendPOSTRequest 业务类 package com.wangjialin.internet.userInformation.service; import java.io.OutputSt ...

  8. ES6-Object‘s Extends

    依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js <!DOCTYPE html> <html&g ...

  9. LDAP落地实战（一）：OpenLDAP部署及管理维护

    公司内部会有许多第三方系统或服务,例如Svn,Git,VPN,Jira,Jenkins等等,每个系统都需要维护一份账号密码以支持用户认证,当然公司也会有许多的主机或服务器,需要开放登录权限给用户登录使 ...

  10. 使用DataTrigger来代替Triggerr

    普通的Trigger监听鼠标移入的代码如下: <Trigger Property="IsMouseOver" Value="true">     & ...