我需要将焦点放在ion-modal的子组件的input上，
打开模态是从子input窃取焦点。
我的第一个解决方案是增加对儿童的关注
家长
const modal = await modalController.create({
component: ChildrenCompWithInput,
});
modal.present();输入的子组件
<template>
<ion-input ref="inputElementRef"></ion-input>
</template>
<script>
...
...
mounted(){
// this will not work, mounted happened before modal is finishing it's present, so the modal takes the focus
(this.$refs.inputElementRef as InstanceType < typeof IonInput > ).$el.setFocus();
setTimeout(()=>{
// this will work, but it's a SHITTY solution, and prone to race conditions
(this.$refs.inputElementRef as InstanceType < typeof IonInput > ).$el.setFocus();
},500)
}我正在寻找一种方法来通知子元素父模态已经完成加载。
我尝试了下一个想法，但找不到与儿童组件对话的方法
const modal = await modalController.create({
component: ChildrenCompWithInput,
});
modal.present();
// best solution would be
modal.addEventListener("did-present",()=>{
// this will not work because I couldn't find any way to make the modalController expose the children's instance.
modal.ChildrenCompWithInputInstance.callFocusMethod();
})
1条答案
按热度按时间ewm0tg9j1#
我找到的解决方案是有效的，但不幸的是，它是一个反模式。
解决方案是子组件将侦听父
<ion-modal>x 1 m1n1x事件(you可能会在文档中看到它为
didPresent或ionModalDidPresent，如果您想侦听离子6事件，请确保使用kebab-case，即ion-modal-did-present，至少vueJs框架是这种情况）这是一个反模式，因为vueJs模式（通常在使用组件时）是下一个：
parent -〉child通信-通过props传递数据，直接调用子方法。
child -〉parentcommunication - child发出一个事件，而parent正在监听该事件。
所以孩子听父母的事情并不是解决问题的最好方法。
但它起作用了，解决了我的问题。
如果有一天Ionic团队将组件示例公开给模态示例，正确答案可能会改变。
输入的子组件