前端新人

父组件中重写子组件方法,首先需要在 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指向的是子组件。
??!!坑挖这了。

Logo

前往低代码交流专区

更多推荐