从 vue 中声明的组件中获取数据答案

【问题标题】：Getting data from declared component in vue从 vue 中声明的组件中获取数据
【发布时间】：2019-07-21 03:02:03
【问题描述】：

目前正在尝试围绕 Vue 和模板进行研究。

我读到您使用$emit() 传递来自child -> parent 的数据

app.js

Vue.component('tweet-postbox', require('./components/tweetPostBox.vue').default);

const app = new Vue({
    el: '#app',
    methods: {
        addTweet (tweet) {
            //from the tweetPostBox.vue postTweet method
            console.log(tweet) 
        }
    }
});

tweetPostBox.vue

<template>
    <div class="post-box">
        <div class="w-100 d-flex align-items-center">
            <div class="profile-image rounded-circle"></div>
            <input v-model="message" type="text" id="tweetText" placeholder="Whats happening?">
        </div>
        <div class="controls d-flex align-items-center w-100">
            <button class="btn btn-primary ml-auto" @click="postTweet" id="postTweet">Tweet</button>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                message: ''
            }
        },
        methods: {
            postTweet:  async function(){
            let response = await axios.post('/post', {
                message: this.message
            })
            //How to get this response data to the main vue instance?
            this.$emit('addTweet', response);
            }
        }
    }
</script>

我正在尝试将值从组件文件中获取到我的app.js...但控制台没有记录任何内容。我哪里错了？

更新：添加 HTML

<div class="container" id="app">
    <tweet-postbox></tweet-postbox>
</div>

【问题讨论】：

您是如何创建tweet-postbox 组件的？在id为app的元素内使用模板，也许？您需要在那里注册监听器。您需要使用 v-on 或简写 @ 来监听事件。
@skirtle 我更新了我的问题以显示 HTML

标签： javascript laravel vue.js

【解决方案1】：

您只需要将模板更改为：

<div class="container" id="app">
    <tweet-postbox @add-tweet="addTweet"></tweet-postbox>
</div>

@add-tweet 部分为add-tweet 事件注册了一个事件侦听器。我使用 kebab case 来避免浏览器区分大小写的问题。您需要发出具有相同名称的事件this.$emit('add-tweet', response)。请参阅the offical documentation 以确认烤肉串案例是可行的方法。

="addTweet" 部分将方法addTweet 指定为侦听器。

https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

【讨论】：

【解决方案2】：

在另一篇文章中找到了这个很好的答案： https://stackoverflow.com/a/47004242/2387934

Component 1:

<!-- language: lang-js -->

    this.$root.$emit('eventing', data);

Component 2:
<!-- language: lang-js -->

    mounted() {
        this.$root.$on('eventing', data => {
            console.log(data);
        });
    }

【讨论】：

如果我是你，我不会靠近这个代码。它不是演示简单的父/子事件，而是使用$root 代替事件总线的更高级的技术。你需要先从官方文档here和here学习基础知识。
那么，使用这个有实际的缺点吗？

【解决方案3】：

首先，请修正你的编码风格，有很多问题包括缩进错误，尝试使用eslint也许。

其次，让我们把this.$emit('addTweet') 分解一下：

this 在该行中指的是 Vue 组件的实例，因此是 TweetPostBox 的实例。
当您使用addTweet 调用$emit 时，您是在组件内调度一个事件。

现在addTweet 已发送，接下来会发生什么？ Vue 将找到所有处理 addTweet 的事件处理程序并执行它们。

现在，在您的情况下，您没有针对此事件的任何事件处理程序。父组件中的addTweet 只是该组件中的一个本地函数，无论如何它都不是事件监听器。

要注册一个事件监听器，Vue 提供了@ 语法，并且你已经在使用@click，所以就像你在做@click="dosomething" 一样（因此你需要为onClick 注册一个事件处理程序使用@add-tweet。（@addTweet 也可以，但它违反了编码风格标准，Vue 会自动为你处理转换）

【讨论】：