从 child.vue 中的挂载向 parent.vue 发出值答案

【问题标题】：emit value from mounted in child.vue to parent.vue从 child.vue 中的挂载向 parent.vue 发出值
【发布时间】：2021-11-28 09:55:55
【问题描述】：

我正在与BootstrapVue 合作。

我需要 emit 为我的 parent.vue 赋值 - 但我的代码行 this.$emit('info', this.hide); 不起作用。

如果我console.log(this.hide) 在这种情况下我的值是正确的false，否则如果我的if-statement 是正确的我得到它true。

这里有什么错误？

我 child.vue 的脚本：

data(){
  return {
    hide: true,
  }
}

mounted() {
  if (statement) {
    if(some statement) {
      //do something
    } else {
      this.hide = false;
      console.log(this.hide); //HERE I GET CORRECT VALUE
      this.$emit('info', this.hide); //THIS DOESNT WORK
    }
  }
}

它应该如何在我的 parent.vue 中工作：

<template>
  <div @info="info">
    <div> //THIS DIV SHOULD BE SHOWN IF this.hide = false
    </div>
    <div> //THIS DIV SHOULD BE SHOWN IF this.hide = true
    </div>
  </div>
</template>

【问题讨论】：

你在 parent.vue 中有 @info 处理程序吗？
是的.. 我的 parent.vue 中有 @info="info"
更新了我的问题，向您展示我需要做什么..
你的子组件叫什么名字？
父：App.vue / 子：login.vue

标签： javascript vue.js vuejs2 bootstrap-vue emit

【解决方案1】：

尝试如下 sn-p ：

Vue.component('Child', {
  template: `
    <div class="">
      child
      <button @click="changeHide">change hide</button>
    </div>
  `,
  data(){
    return {
      hide: true,
    }
  },
  methods: {
    changeHide() {
      this.hide = !this.hide
      this.sendInfo()
    },
    sendInfo() {
      this.$emit('info', this.hide);
    }
  },
  mounted() {
    //if (statement) {
      //if(some statement) {
        //do something
      //} else {
        this.hide = false;
        this.sendInfo()
      //}
    }
  
})

new Vue({
  el: '#demo',
  data(){
    return {
      info: null,
    }
  },
  methods: {
    setInfo(val) {
      this.info = val
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-if="!info"> //THIS DIV SHOULD BE SHOWN IF this.hide = false
  </div>
  <div v-if="info"> //THIS DIV SHOULD BE SHOWN IF this.hide = true
  </div>
  <p>from child info is: {{ info }}</p>
  <Child @info="setInfo" />
</div>

【讨论】：

【解决方案2】：

最好在 App.vue (Parent)

你应该有类似的东西

<login @info="someHandler"></login>

如果您只是用来管理一些逻辑，则无需使用子组件。只有在模板中有一些内容时才合适。还将发射处理程序放在某些 div 上。这不是发射的工作原理

下面是一个简单的工作示例

App.vue（父级）

<template>

  <h1>{{ title }}</h1>

  <Child @changeTitle="ChangeT($event)" />

</template>
<script>
import Child from "./components/Child"
export default{
name:'App',
components: {
    Child,
},
data()
{
   return{
     title:'Rick Grimes'
         }
},
methods:{
    ChangeT(title)
    {
      this.title=title;
    },
}
</script>
<style></style>

Child.vue

<template lang="html">
  <button type="button" @click='passEvent'> Update me</button>
</template>

<script>
export default {
  name:'Child',
  methods:{
    passEvent()
    {
      this.$emit('changeTitle','Awesome ')
    }
  }
}
</script>

<style lang="css" scoped>
</style>

【讨论】：