Vue JS从父组件不触发向子组件发出事件

Question

我在 Nuxt JS 项目中工作。我有几个组件，其中一个名为 ComplianceOptoutRawText 的组件包含一个名为 ComplianceOptoutViaExternalService 的子组件，正是这个子组件让我使用 v-on 来监听 [=15] =] 来自 ComplianceOptoutRawText 的事件，因此我可以切换变量，但我在控制台日志中根本看不到它，需要知道我做错了什么并需要更改。

这是我的标记，包含所有合适的内容：

ComplianceOptoutRawText

<template>
  <div>
    <div>
      <div class="tw-hidden md:tw-block tw-font-bold tw-mb-4">
        <ComplianceOptoutViaExternalService>
          <template #trigger>
            <button @click="$emit('shown-optout-intent', true)" type="button">here</button>
          </template>
        </ComplianceOptoutViaExternalService>
      </div>
    </div>
  </div>
</template>

然后是子组件本身：

ComplianceOptoutViaExternalService

<template>
  <div>
    <slot name="trigger"></slot>
    <article v-show="wantsToOptOut" v-on:shown-optout-intent="hasShownOptoutIntent" class="tw-bg-white tw-p-4 md:tw-p-6 tw-rounded-xl tw-text-gray-800 tw-border tw-border-gray-300 tw-text-left tw-mt-4">
      <validation-observer v-if="!didOptOut" ref="optoutServiceForm" key="optoutServiceForm" v-slot="{ handleSubmit }" tag="section">
        <form>
          ...
        </form>
      </validation-observer>
    </article>
  </div>
</template>

<script>
export default {
  data () {
    return {
      wantsToOptOut: false,
      isOptingOut: false,
      didOptOut: false
    }
  },
  methods: {

    /*
    ** User has shown opt out intent
    */
    hasShownOptoutIntent (value) {
      this.wantsToOptOut = !this.wantsToOptOut
    }

  }
}
</script>

请注意，我的子组件使用了一个插槽，这样我就可以根据需要在父组件中放置所有内容，但在它的核心，我有一个父组件发出一个值，然后通过 [=17 监听它=] 运行 hasShownOptoutIntent 方法。

但是我从按钮上看不到任何东西，即使我 console.log 这个。我错过了什么？

Answer 1

我正在对嵌入式组件做类似的事情，因此也许值得一试：

<button @click="$emit('update:shown-optout-intent', true)" type="button">here</button>

... 然后：

v-on:shown-optout-intent.sync="hasShownOptoutIntent"

顺便说一句，删除 v-on 并使用：:shown-optout-intent.

是安全的

Vue JS从父组件不触发向子组件发出事件

Vue JS emit event to child component from parent component not triggering

javascript

vue.js

nuxt.js