目录
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master
大家根据上传历史进行查找你需要的代码
sync属性修饰符
属性修饰符.sync,可以实现父子数据同步。
以后在elementUI组件中出现,实现父子数据同步。
1.基础结构搭建:
在src/pages/Communication/SyncTest/SyncTest.vue中:
效果:
2.不使用sync修改符
在src/pages/Communication/SyncTest/SyncTest.vue中:
<template>
<div>
小明的爸爸现在有{
{money}}元
<h2>不使用sync修改符</h2>
<!--
:money 父组件给子组件传递props
@update:money给子组件绑定的自定义事件,只不过名字叫做update:money
目前这种操作,其实和v-model很相似,可以实现父子组件数据同步
money=$event 给monet重新赋值,为子组件传回来的数据
-->
<Child :money="money" @update:money="money = $event" />
<h2>使用sync修改符</h2>
<hr>
</div>
</template>
<script type="text/ecmascript-6">
import Child from './Child.vue'
import Child2 from './Child2.vue'
export default {
name: 'SyncTest',
data() {
return {
money: 10000
}
},
components: {
Child,
Child2
},
}
</script>
在src/pages/Communication/SyncTest/Child.vue中:
<template>
<div style="background: #ccc; height: 50px;">
<span>小明每次花100元</span>
<!-- $emit触发自定义事件,第一个参数是触发自定义事件的名字,
第二个参数是子组件需要把父亲还剩多少钱告诉父亲 -->
<button @click="$emit('update:money',money-100)">花钱</button>
爸爸还剩{
{money}}元
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: 'Child',
props:['money']
}
</script>
效果:
3.使用sync修改符
在src/pages/Communication/SyncTest/SyncTest.vue中:
在src/pages/Communication/SyncTest/Child2.vue中:
效果:也同样实现了效果
总结:
属性修饰符sync[组件通信方式的一种]
可以实现父子组件数据同步
:money.sync,代表父组件给子组件传递props[money],给当前子组件绑定一个自定义事件(update:money)
: