从安装在 child.vue 到 parent.vue 发出值

Question

我正在与 BootstrapVue 合作。

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

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

这里有什么错误？

我的脚本 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>

Answer 1

最好在 App.vue (Parent)

你应该有类似的东西

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

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

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

App.vue (parent)

<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>

Answer 2

尝试类似以下片段的操作：

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>

从安装在 child.vue 到 parent.vue 发出值

emit value from mounted in child.vue to parent.vue

javascript

emit

vue.js

vuejs2

bootstrap-vue