vue练习 17、vue计算属性-依赖其他实例的数据17、vue计算属性-依赖其他实例的数据计算属性有两个很实用的小

17、vue计算属性-依赖其他实例的数据

计算属性有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性：计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17、vue计算属性-依赖其他实例的数据</title>
</head>
<body>
    <div id="app1"></div>
    <div id="app2">
        {{reversedText}}
    </div>

    <script src="./vue.js"></script>
    <script>
        var app1 = new Vue({
            el:'#app1',
            data:{
                text:'123,456'
            }
        });

        //app2的计算属性依赖app1的数据
        var app2 = new Vue({
            el:'#app2',
            computed:{
                reversedText:function(){
                    //这里依赖的是实例 app1的数据text
                    return app1.text.split(',').reverse().join(',');
                }
            }
        })
    </script>
</body>
</html>

输出：456,123

这里我们创建了两个Vue实例app1和 app2，在app2的计算属性reversedText中，依赖的是app1的数据text，所以当text变化时，实例app2的计算属性也会变化。这样的用法在后面章节介绍的组件和组件化里会用到,尤其是在多人协同开发时很常用，因为你写的一个组件所用得到的数据需要依赖他人的组件提供。随着后面对组件的深入会慢慢意识到这点，现在可以不用太过了解。