vue对象之间的操作

1、可以通过一个vue对象操作另一个vue对象

例如：

<button type="button" @click="changeOtherVueTitle">点我</button>

var v2 = new Vue({//名字为v2的vue实例
    el:"#app1",
    methods: {
        changeOtherVueTitle(){
            v1.title = "hello js"//改变v1中data里面title的内容
        }
       
    }

})

var v1 =  new Vue({//名字为v1的vue实例
    el:"#app",
    data:{
        title:"hello vue"//原数据
    }
    
});

2、vue对象操作另一个vue对象的内容，维度有两个，操作属性，操作方法

例如：

<div id="app">
        {{title}}<!--显示内容-->
        {{toLowCase}}<!--显示v1的属性-->

    </div>

    <div id="app1">

        <button type="button" @click="changeOtherVueTitle">点我</button><!--操作属性-->
        <button type="button" @click="m1">调用v1中的方法</button><!--操作方法-->



    </div>



       var v2 = new Vue({//名字为v2的vue实例
              el:"#app1",
              methods: {
                  changeOtherVueTitle(){
                      v1.title = "hello js"//改变v1中data里面title的内容
                  },
                  m1(){
                      v1.toUpCase();//调用v1里面的toUpCase()方法将v1中data里面title的内容改成大写
                  }
              }
      
          })
      
      
          var v1 =  new Vue({//名字为v1的vue实例
              el:"#app",
              data:{
                  title:"hello vue"//原数据
      
              },methods:{
                  toUpCase(){
                      this.title =  this.title.toUpperCase();//将data里面的数据改成大写
                  }
              },computed:{
                  toLowCase() {
                      return this.title.toLowerCase();//将data里面的数据改成小写
                  }
              },watched:{
                  title : function (n,o) {
                      console.log(n+","+o);//监听
                  }
              }
          });