主要是不想使用$refs这样层级调用,复杂且麻烦
主要使用provide和bind完成
实现逻辑:将父组件全局变量test1 provide出去,子组件inject接收,并且给test1的fn绑定方法
则父组件在本页面调用fn(),就可完成调用子组件的方法
父组件:
export default {
let test1:{fn: null}
provide() {
return {
test2: test1
}
},
methods: {
onClick() {
test1.fn() // ok
}
}
}
子组件:
export default {
inject: ['test2'],
create(){
test2.fn = this.doSomething.bind(this)
},
methods: {
doSomething() {
console.log('ok')
}
}
}