Блог

Я нахожусь на Nuxt 2.15.8 и хочу получить результат моего события. У меня есть дочерний компонент, в котором генерируется событие . затем получите его на родительском компоненте и выполните несколько вызовов api . Мне нужна двусторонняя связь, чтобы я мог сообщить ребенку , что событие было отправлено, был отправлен вызов api и получен результат, поэтому выполните некоторые действия ! (в настоящее время это делается путем передачи логической опоры ребенку и наблюдения за этим)

что я делаю прямо сейчас:

мой родительский компонент :

 lt;templategt;  lt;childcomponent :result="result" @childEvent="handleEvent" /gt;  lt;/templategt; lt;scriptgt; export default {  components:{ childcomponent },  data(){  return{  result: false  }  }  methods:{  async handleEvent(val){  let res = this.$axios.get(`/example/${val}`)  if(res){  this.result = true  }else{  this.result = false  }  }  } } lt;/scriptgt;  

компонент «мой ребенок» :

 lt;templategt;  lt;div @click="doSomething"gt;lt;/divgt; lt;/templategt; lt;scriptgt; export default {  props:['result'],  watch:{  result(e){  if(e){  // do something  }  }  }  methods:{  doSomething(){  // do something  this.$emit('childEvent', 'val')  }  } } lt;/scriptgt;  

Я знаю , что могу использовать $nuxt.$emit() для отправки другого события от родителя и получения его от ребенка, но я хочу что-то простое, например

 //child this.$emit('childEvent', 'val' , (result)=gt;{  // result of event handler sent from parent })  // Or  let res = await this.$emit('childEvent', 'val') if(res){  // do something }  

Возможно ли это вообще??

Я не совсем понимаю, почему вы можете захотеть уведомить ребенка. Если вам просто нужно состояние «загрузка», подойдет опора (установите значение загрузки true при запуске axios, а затем значение false при его завершении). Кстати, API axios асинхронен (основан на обещаниях), поэтому вы должны использовать await:

 let res = await this.$axios.get(`/example/${val}`)  

Но, перейдя к теме, вы можете напрямую вызывать методы дочернего компонента, просто используйте ссылку для доступа к экземпляру:

 lt;templategt;  lt;childcomponent ref="child" :result="result" @childEvent="handleEvent" /gt;  lt;/templategt; lt;scriptgt; export default {  components:{ childcomponent },  data(){  return{  result: false  }  }  methods:{  async handleEvent(val){  let res = await this.$axios.get(`/example/${val}`)  this.$refs.child.getResult(res)  }  } } lt;/scriptgt;  

И ребенок:

 lt;templategt;  lt;div @click="doSomething"gt;lt;/divgt; lt;/templategt; lt;scriptgt; export default {  methods:{  doSomething(){  // do something  this.$emit('childEvent', 'val')  },  getResult(res) {  // do something  }  } } lt;/scriptgt;