vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的。

先看官方文档:



接下来举例实现

1、实现一个双向数据绑定,子组件改变的时候,父组件也在改变

父组件

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <child :titleSync.sync="title"/> <br>
<span>{{ '我是父组件:' + title}}</span>
</div>
</template> <script>
import Child from '../components/Child' export default {
name: 'home',
components: {
Child,
},
data() {
return {
title: 'sync测试用例',
}
}
}
</script>

子组件

<template>
<div>
-----------------Child------------------ <input type="text" v-model="config"> </div>
</template> <script>
export default {
name: 'Child',
props: {
titleSync: String,
},
computed: {
config: {
get() {
return this.titleSync
},
set(val) {
this.$emit('update:titleSync', val)
}
}
}
}
</script> <style> </style>

结果图:

2、点击子组件按钮修改父组件数据

父组件

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <child :nameSync.sync="name"/> <br>
<span>{{ '我是父组件:' + name}}</span>
</div>
</template> <script>
import Child from '../components/Child' export default {
name: 'home',
components: {
Child
},
data() {
return {
title: 'sync测试用例',
name: '我是sync的第二个测试用例'
}
}
</script>

子组件

<template>
<div>
-----------------Child------------------
<br> <button @click="syncClick">点击更改名字</button> </div>
</template> <script>
export default {
name: 'Child',
props: {
nameSync: String,
},
data() {
return {
name: '张三'
}
},
methods: {
syncClick() {
this.$emit('update:nameSync', this.name)
}
},
}
</script> <style> </style>

结果图:

vue中通过.sync修饰符实现子组件修改父组件数据的更多相关文章

  1. vue中的.sync修饰符用法

    在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...

  2. vue中的.passive修饰符

    一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...

  3. 【VUE】7.组件通信(二)子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  4. vue2.0子组件修改父组件props数据的值

    从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...

  5. React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)

    子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...

  6. vue组件中的.sync修饰符使用

    在vue的组件通信props中,一般情况下,数据都是单向的,子组件不会更改父组件的值,那么vue提供.sync作为双向传递的关键字,实现了父组件的变动会传递给子组件,而子组件的carts改变时,通过事 ...

  7. vue 子组件修改父组件传来的props值,报错

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...

  8. vue—子组件修改父组件的值

    如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...

  9. 14. VUE 子组件修改父组件的值

    在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的. 子组件 修改 传递数据 直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接 ...

随机推荐

  1. nyoj 811-变态最大值 (max)

    811-变态最大值 内存限制:64MB 时间限制:1000ms 特判: No 通过数:6 提交数:15 难度:1 题目描述: Yougth讲课的时候考察了一下求三个数最大值这个问题,没想到大家掌握的这 ...

  2. Spring Boot2 系列教程(二十五)Spring Boot 整合 Jpa 多数据源

    本文是 Spring Boot 整合数据持久化方案的最后一篇,主要和大伙来聊聊 Spring Boot 整合 Jpa 多数据源问题.在 Spring Boot 整合JbdcTemplate 多数据源. ...

  3. C. Present(二分 + 扫描线)

    题目链接:http://codeforces.com/contest/460/problem/C 题意: n盆花,浇k次水, 每次可使花高度 + 1, 每次可浇相邻的w盆,ai 表示 i-th盆花 的 ...

  4. 记录工作遇到的死锁问题(Lock wait timeout exceeded; try restarting transaction)

    1.问题背景 刚来新公司不久,对业务还不太熟悉,所以领导先安排我维护原有系统.大概介绍下项目背景,项目分为核心业务部分在项目A中,与第三方交互的业务在项目B中,前端发起请求调用A项目接口,并在A项目中 ...

  5. [ch02-01] 线性反向传播

    系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力. 2.1 线性反向传播 2.1.1 正向计算的实例 假设我 ...

  6. 在linux系统下进行pip升级注意事项

    今天鼓捣爬虫的时候需要用pip安装beautifulsoup4,但是出现了错误,说我的pip版本太低,需要升级一下.刚开始我用了下面这段代码: pip install --upgrade pip 显示 ...

  7. JavaScript 关于setTimeout与setInterval的小研究

    说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...

  8. 2019-9-28:渗透测试,基础学习,pgp常量,逻辑运算,DNS投毒,笔记

    sunny.exe clientid 隧道ID route -n 查看网关netstat -rn 查看网关 DNS劫持ettercap用来内网渗透测试使用,可以嗅探内网,DNS劫持等攻击1,在攻击者电 ...

  9. Navicat Premium 12连接ubuntu18 ,Mysql 5.7.27-0

    1,搭建好mysql服务器,cd  /etc/mysql/mysql.conf.d,进入mysql配置目录,vim mysqld.cnf 2,注释掉,bind-address =127.0.0.1 , ...

  10. 【Luogu P1714】切蛋糕(面向对象编程首次尝试?)

    Luogu P1714 题目的大意就是给定一个长度为n的序列,求出这个序列中长度不超过m的子串的最大和 很容易想出的一个解法就是枚举起点终点,直接暴力扫一遍得出答案. 当然也很容易发现这种做法肯定会T ...