javascript - 从vue中声明的组件获取数据

Question

目前我正在尝试了解 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>

Answer 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://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers