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

Posted 2023-02-16

【中文标题】从 child.vue 中的挂载向 parent.vue 发出值

【英文标题】：emit value from mounted in child.vue to 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

【参考方案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>