javascript - Vue $emit 不在父级内部触发

Question

出于某种原因，我的 $emit 似乎没有在父级内部触发。我基本上是想为 html 表单创建一个模式弹出窗口。在我的 header 组件中，我有一个触发 $emit 的按钮，然后我尝试在表单组件上的 app.js 中监听此事件。但是当发射被触发时，表单组件什么也不做。

这是我的代码

client/src/app.js

<template>
    <div id="app">
        <MainHeader :modalVisability="modal" />
        <OppForm :modalVisability="modal" v-on:showModal="modal = $event"/>

        <div>{{ modal }}</div>
    </div>
</template>

<script>
import MainHeader from './components/MainHeader.vue';
import OppForm from './components/oppForm.vue';

export default {
    name: 'App',
    components: {
        MainHeader,
        OppForm
    },
    data() {
        return {
            modal: false
        }
    }
}
</script>

客户端/组件/MainHeader.vue

<template>
    <div id="main_header_wrap">
        <header>
            <button v-on:click="showOppForm">Add Post</button>
        </header>

        <div>{{ modalVisability }}</div>
    </div>
</template>

<script>
    export default {
        props: {
            modalVisability: Boolean
        },
        methods: {
            showOppForm() {
                this.modalVisability = true;
                this.$emit('showModal', this.modalVisability);
            }
        },
    }
</script>

client/src/components/oppForm.vue

<template>
    <div id="opp_form" >
        <form @submit.prevent="SubmitOpp" v-if="modalVisability">
            <input type="text" name="company_name" v-model="company_name">
            <button type="submit">Submit</button>
        </form>

        <div>{{ modalVisability }}</div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'oppForm',
        props: {
            modalVisability: Boolean,
        },
        data() {
            return {
                company_name: ''
            }
        },
        methods: {
            SubmitOpp() {
                axios.post('http://localhost:5000/', {
                    company_name: this.company_name,
                })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    }
</script>

Answer 1

我修复了你的代码中的一些内容。请参阅下面的示例:

client/src/app.js

<template>
  <div id="app">
    <MainHeader :modalVisability="modal" @showModal="changeModal" />
    <OppForm :modalVisability="modal" />
    <div>App = {{ modal }}</div>
  </div>
</template>

<script>
import MainHeader from './components/MainHeader.vue';
import OppForm from './components/oppForm.vue';

export default {
  name: 'App',
  components: { MainHeader, OppForm },
  data() {
    return {
      modal: false,
    };
  },
  methods: {
    changeModal(newValueModal) {
      this.modal = newValueModal;
    },
  },
};
</script>

客户端/组件/MainHeader.vue

<template>
  <div id="main_header_wrap">
    <header>
      <button v-on:click="showOppForm">Add Post</button>
    </header>
    <div>MainHeader = {{ modalVisability }}</div>
  </div>
</template>

<script>
export default {
  props: {
    modalVisability: Boolean,
  },
  methods: {
    showOppForm() {
      this.$emit('showModal', !this.modalVisability);
    },
  },
};
</script>

client/src/components/oppForm.vue

<template>
  <div id="opp_form">
    <form @submit.prevent="SubmitOpp" v-if="modalVisability">
      <input type="text" name="company_name" v-model="company_name" />
      <button type="submit">Submit</button>
    </form>
    <div>oppForm = {{ modalVisability }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'oppForm',
  props: {
    modalVisability: Boolean,
  },
  data() {
    return {
      company_name: '',
    };
  },
  methods: {
    SubmitOpp() {
      axios
        .post('http://localhost:5000/', {
          company_name: this.company_name,
        })
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
};
</script>

1 - App.js:监听 MainHeader 组件中的事件。

2 - App.js:OppForm不需要监听事件，因为该组件不会更改modal值。

3 - MainHeader.vue:避免更改 props 值。