美文网首页
组件之间数据同步

组件之间数据同步

作者: 果汁密码 | 来源:发表于2017-09-16 22:52 被阅读24次

数据同步的核心:父组件给子组件传递引用数据类型的数据

父组件:

<template>
        <div>
              <h1>父组件 {{msg.name}}</h1>
              <children :n="msg"></children>
        </div>
</template>
<script>
export default {
  data() {
    return {
      msg:{name:'hahah'} // 引用数据类型
    }
  }
}
</script>

子组件:

<template>
      <div>
            <h2 @click="sync">子组件 {{n.name}}</h2>
      </div>
</template>
<script>
export default {
  props: {n:Object},
  methods: {
    sync() {
      this.n.name = 'changed'
    }
  }
}
</script>

相关文章

  • 组件之间数据同步

    数据同步的核心:父组件给子组件传递引用数据类型的数据 父组件: 子组件:

  • useReducer+useContext instead Re

    遗留问题: 目前只实现了触发useContext通过父级组件同步子组件,未实现同级组件之间的state同步 red...

  • react学2-父子组件通信

    react单项数据流动 父组件可以传递数据给子组件 但是这样如果想在父组件修改name的属相值,子组件也同步修改。...

  • mpVue记录3——父子组件传值/插槽

    vue父子组件传值过程:子组件:props接收,data里同步数据父组件:在子组件通过$emit()发送,父组件定...

  • 定时同步数据的奥秘

    我总以为两个系统之间的同步数据实时性越高越好,只有同步大量数据时才利用定时同步。今天了解到了不同系统之间的同步,发...

  • vue学习过程

    基础部分 实例组件指令选项模板渲染事件绑定计算属性内置动画组件交互路由数据渲染/数据同步组件化、模块化 官方工具:...

  • React 父子组件数据关系与状态提升(5)

    父子组件数据关系与状态提升 状态提升:两个组件(无父子关系)共享一个数据并同步数据变化,即将子组件中的数据提升到父...

  • vue组件之间通信

    vue 组件之间通信 vue组件之间通信方式: 1.父组件通过props向下传数据给子组件,子组件通过$emit事...

  • 老生常谈——vue组件之间通信

    老生常谈的组件之间通信 vue组件之间的通信细分为三种情况:兄弟组件之间的通信,父组件向子组件传递数据,子组件向父...

  • Spring Cloud——Eureka Server服务同步和

    服务同步 服务同步是Server节点之间的数据同步。分为启动时同步,运行时同步。 启动同步 在EurekaServ...

网友评论

      本文标题:组件之间数据同步

      本文链接:https://www.haomeiwen.com/subject/cfgusxtx.html