nuxt js中的组件间通信

时间:2019-03-11 07:56:59

标签: vue-component nuxt.js nuxt

我正在尝试从另一个组件调用一个组件的函数。 在被调用的函数中,有一个存储调度程序,如果从同一组件调用它,则可以工作,但是如果从其他组件进行调用,则会产生错误。 与$ emit和$ on

相同

无法读取未定义的属性“ dispatch”

调用函数的组件

<template>
 <div>
   <button @click="doSubmit()">submit</button>
 </div>
</template>

<script>
  import empinfo from '../components/empinfo'
    export default {
     components: {

      },
   data() {
     return {
      infoEmp: {

      }   
    }
  },
 methods: {
  doSubmit() {
  empinfo.methods.putEmpinfo()
  console.log('this sendEmpinfo', empinfo.methods.putEmpinfo())

  // this.$nuxt.$on('EMP_INFO', (data) => {
  //   this.infoEmp = data
  //   console.log('in data', data)
  // })
  console.log('infoEmp', this.infoEmp)
  }
 }
}
</script>

这里

该函数

<script>
  export default {
   data() {
     return {
      empInfo: {
       lastName: "",
       firstName: "",
       middleIntial: "",
       otherLastName: "",
       address: "",
       apartmentNo: "",
       city: [],

     }
   }
 },
computed: {
compEmpinfo() {
  // console.log('emp inform', event)
  // this.$store.dispatch('formdata/EMP_INFO', this.empInfo)

  console.log("this is ", this)

  const some = this.$store.dispatch("formdata/EMP_INFO", this.empInfo)
  console.log("log sto", some)
  return some

  // return this.$nuxt.$emit('EMP_INFO', this.empInfo)
}
},

methods: {
  putEmpinfo() {
  // console.log('emp inform', event)
  // this.$store.dispatch('formdata/EMP_INFO', this.empInfo)

  //console.log("this is ", this)

  try {
    const some = this.$store.dispatch("formdata/EMP_INFO", 
this.empInfo)
    console.log("log some", some)
  } catch (error) {
    console.log("try clatch", error)
  }
  // return this.$nuxt.$emit('EMP_INFO', this.empInfo)
},
testcall() {
  console.log("test call works")
},
sendEmpinfo() {
  return this.empInfo
  }
  }
  }
  </script>

0 个答案:

没有答案