组件通信之sync-父子数据同步

先实现一个案列小明花钱爸爸的钱随之减少

1：点击花钱按钮，爸爸的钱就减少100，数据定义在父组件之中，所以对money操作的函数就要放在父组件之中，所以父组件 Child中绑定一个@update：money =“money=$event"

@update是自定义事件名称，

：money是父组件向子组件传过来的money

“money=$event"就是父组件当中的值修改为子组件传过来的值

这时在子组件中触发这个自定义事件（update：money）然后写下点击之后真正剩下的钱数

(money-100)

父组件
<template><div>小明的爸爸现在有{{money}}元<h2>不使用sync修改符</h2><Child :money="money" @update:money="money=$event"/>
</div>
</template>
<script type="text/ecmascript-6">
import Child from './Child.vue'
export default {name: 'SyncTest',data() {return {money:10000}},components: {Child,Child2}
}

子组件

<template><div style="background: #ccc; height: 50px;"><span>小明每次花100元</span><button @click="$emit('update:money',money - 100)">花钱</button>爸爸还剩{{money}}元</div>
</template><script type="text/ecmascript-6">export default {name: 'Child',props:['money']}
</script>

下面写有修饰符sync的---作用都是一样的

父组件的child改成<Child2 :money.sync="money"/>

这样写完代表子组件会给父子件传递一个money的值，也会给当前这个child2绑定一个自定义事件就叫update:money（虽然他没写update）但是会自动给绑定一个update事件

子组件child2，与child是相同的
<template><div style="background: #ccc; height: 50px;"><span>小明每次花100元</span><button @click="$emit('update:money',money - 100)">花钱</button>爸爸还剩 {{money}} 元</div>
</template>
<script type="text/ecmascript-6">export default {name: 'Child2',props:['money']}
</script>

相同效果

总结：

理解传值过程：子组件的money是props接收过来的，然后money-100这个新值我要通过触发父组件绑定的自定义事件（$emit(update:money))发送给父组件。

:money.sync 有两个含义

1：给子组件传递props：money

2：给当前子组件绑定一个自定义事件时间名 update 属性名（update：money）

还有一个父子组件通信-$attrs 和$Listeners

$attrs:可以获取所有父组件传过来的props数据（props没有接收）

$listeners：可以获取父亲传递的自定义事件

通过绑定这两个属性我可以把父组件的按钮里面的属性事件全部显示自组件这个按钮身上并且显示出来。

组件通信之sync-父子数据同步相关推荐

子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
Vue 学习06——Vue父子组件通信、非父子组件通信1
目录㋀㋊ ✎ 父子组件间通信(Communication) ◆ 组件间通信父组件向子组件传递数据 ➬ ① 前言 ② demo ➬ 还有一种形式叫做插槽 ◆ 子组件向父组件传递数据 ① 前言 ② ...
Vue组件通信以及.sync修饰符的使用
文章目录前言一.Vue的组件通信方式 1.1 props/$emit 1.2 Vuex 二.Vue的.sync修饰符 2.1 父组件向子组件传递数据 2.2 子组件使用props接收父组件的数据 ...
02-React受控组件及非受控组件、数据渲染、事件处理、组件通信
一.受控组件和非受控组件 React组件的数据渲染是否被调用是通过传递过来的props完全控制控制则为受控组件,否则非受控组件. 二.数据渲染 1.条件渲染 { flag ? "开启& ...
VUE非父子组件通信Bus——公交车踩坑笔记
抛开父子组件的通讯,对于非父子组件通信,简单的数据交互,使用Bus是非常不错的. 遇到的坑有两个. 1.两个组件的信息交互代码写在哪个生命周期函数中,如果只是点击组件A标签触发函数,然后向界面B传递参 ...
VUE非父子组件通信
非父子组件通信 vue非父子组件传值方式,本文章整理了两种方式:vuex和总线bus.vuex相比于总线bus来说非常的稳定,推荐直接使用vuex. 我看其他的文章基本上是[点击导航栏回退的时候,去获 ...
vue父子组件通信，兄弟组件通信
目录一.父子组件通信 1.子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想) a:子组件通过 props 获取父组件变量 b:父组件调用子组件中的方法 2.父 ...
angularjs1访问子组件_vue 组件通信看这篇就够了(12种通信方式)
vue 组件间的通信是 vue 开发中很基础也十分重要的部分,作为使用 vue 的开发者每天都在使用.同时,vue 通信也是面试中非常高频的问题,有很多面试题,都是围绕通信展开. 本文会介绍常见的通信 ...

组件通信之sync-父子数据同步

组件通信之sync-父子数据同步相关推荐

最新文章

热门文章