Vue3 向父级发出值答案

【问题标题】：Vue3 emit value to parentVue3 向父级发出值
【发布时间】：2021-08-24 14:18:08
【问题描述】：

我是 Vue 新手，目前正在创建一个动态显示缩写的表格。

我尝试从我的子组件向父组件发出一个 searchTerm，但我不知道该怎么做。

我的问题是，当我尝试将搜索输入和表格分开时，该值不会发送给父级。

我尝试通过定义 props 和导出默认值来解决这个问题，但不知何故我的组件不接受这个。

const SzNavbar = {
  template: `
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand" href="#">
                <span>Test - Shorty</span>
            </a>
            <button class="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </nav>`
}

const SzSearchfield = {
  template: `
        <form class="mt-5">
            <div class="form-row">
              <div class="col-md-12">
                <label class="mr-2" for="txtSearch">Suche:</label>
                <input type="text" v-model="searchTerm" class="form-control" placeholder="Suchbegriff"/>
                <div class="input-group-append">
                  <button type="button" @click="onSearch" class="btn btn-primary margin">Suche</button>
                </div>
              </div>
              <p>Search Term: {{ searchTerm }}</p>
            </div>
          </form>`,
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    onSearch() {
      this.$emit('search', this.searchTerm)
      console.log(this.searchTerm)
    }
  }
}

const SzShorty = {
  template: `<sz-searchfield></sz-searchfield>`,
  components: {
    'sz-searchfield': SzSearchfield
  },
  data() {
    return {
      searchTerm: '',
    };
  }
}

const app = Vue.createApp({
  components: {
    'sz-shorty': SzShorty,
    'sz-searchfield': SzSearchfield,
    'sz-navbar': SzNavbar,
  }
})

app.mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<div id="app">
  <sz-navbar></sz-navbar>
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <sz-shorty></sz-shorty>
      <!-- <test-bar></test-bar> -->
    </div>
  </div>
</div>

提前致谢

【问题讨论】：

我已经完善了您的代码，使其仅包含相关部分，使其成为minimal reproducible example。这将有助于任何试图更好地理解您的问题的人。

标签： javascript html vue.js vuejs3

【解决方案1】：

您需要在父组件处监听您的子组件发出的search 事件。注意SzShorty 的@search 侦听器，其中包含sz-searchfield 组件

在文档中了解更多关于 Vue emit 的信息。

我在父组件中添加了一个console.log()，它打印search 以及从子组件发出的搜索词。

const SzSearchfield = {
  template: `
        <form class="mt-5">
            <div class="form-row">
              <div class="col-md-12">
                <label class="mr-2" for="txtSearch">Suche:</label>
                <input type="text" v-model="searchTerm" class="form-control" placeholder="Suchbegriff"/>
                <div class="input-group-append">
                  <button type="button" @click="onSearch" class="btn btn-primary margin">Suche</button>
                </div>
              </div>
              <p>Search Term: {{ searchTerm }}</p>
            </div>
          </form>`,
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    onSearch() {
      this.$emit('search', this.searchTerm)
      console.log(this.searchTerm)
    }
  }
}

const SzShorty = {
  template: `<sz-searchfield @search="onSearch"></sz-searchfield>`,
  components: {
    'sz-searchfield': SzSearchfield
  },
  data() {
    return {
      searchTerm: '',
    };
  },
  methods: {
    onSearch: (val) => {
      console.log("onSearch", val)
    }
  }
}

const app = Vue.createApp({
  components: {
    'sz-shorty': SzShorty,
    'sz-searchfield': SzSearchfield
  }
})

app.mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<div id="app">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <sz-shorty></sz-shorty>
      <!-- <test-bar></test-bar> -->
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以通过 Vue 内置的 $emit() 方法将数据从子组件发送到父组件。 $emit 的第一个参数是应该在父组件中监听的事件。第二个（可选）参数是要传递的数据值。

请修改代码以监听子组件向父组件发出的搜索事件。

【讨论】：