vue.js - vue js 的两个ViewModel之间如何能够实现数据响应?

查看:126
本文介绍了vue.js - vue js 的两个ViewModel之间如何能够实现数据响应?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

我的一个页面里有两个vm,一个vm的data 是在input标签里实时变化的,我想让这个vm的data变化时,另一个vm里的某一个data也响应式变化,怎么做到呢?谢谢!

解决方案

在vm2上定义computed

<body>
<div id="app">
    <input type="text" name="data1" v-model="data1">
</div>
<div id="app1">
    <input type="text" name="data2" v-model="data2">
    {{ data2 }}
</div>
<script src="vue.min.js"></script>
<script>
    var vm1 = new Vue({
        el:"#app",
        data:{
            data1:"你好"
        }
    })
    var vm2 = new Vue({
        el:"#app1",
        data:{},
        computed:{
            data2:{
                get:function(){
                    return vm1.$data.data1
                }
            }
        }
    })
</script>
</body>

这篇关于vue.js - vue js 的两个ViewModel之间如何能够实现数据响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆