Vue中父组件重写子组件中的方法,以及遇到的执行环境问题
前端新人父组件中重写子组件方法,首先需要在 template 模块的子组件标签中添加 ref特性,如下:<interface1 ref="myinterface"></interface1>ref的值会用到,然后可以在父组件事件中重写了,如下:change1(){this.$refs.myinterface.change = function...
·
前端新人
父组件中重写子组件方法,首先需要在 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指向的是子组件。
??!!坑挖这了。
更多推荐
已为社区贡献1条内容
所有评论(0)