Vue中父组件重写子组件中的方法，以及遇到的执行环境问题

前端新人

父组件中重写子组件方法，首先需要在 template 模块的子组件标签中添加 ref特性，如下：

<interface1 ref="myinterface"></interface1>

ref的值会用到，然后可以在父组件事件中重写了，如下：

change1(){
        this.$refs.myinterface.change = function(){
        console.log("父组件修改子组件change")
        }
      }

上面我重写的是子组件中的change（）方法。

接下来是涉及到执行环境的问题，比如我重写的方法中会用到或修改子组件中data的值，以下是我自己想的方法，可能不是最好的。

      change1(){
        this.$refs.myinterface.change = function(){
          this.a = '父change1修改'
        }
      }

这里的this已经指向子组件了。
但是，上面的如果在子组件中change事件被绑定了，比如
<button @click="change">修改值</button>，点击按钮之后发现change并没有改变过来，而且如果你console.log(this)发现this为null。
但如果你这样操作，

 <button @click="change1">修改值1</button>
 ......
  change1(){
        this.change()
  }

会发现重写其实是成功的，this指向的是子组件。
？？！！坑挖这了。