将子组件中的文本字段链接到 VueJS 中父组件的道具

Question

我有一个子组件通过事件向 VueJS 中的父组件发送数据。 从父组件中，我将数据（或尝试将数据...）路由到子组件的兄弟姐妹，并使用从子组件发送的数据创建新组件。

由于各种原因，我使用字典对数据进行分组，然后将字典推送到数组中。 v-for 循环遍历数组，并使用在该数组中找到的数据填充前面提到的新组件。 我可能不需要这样做，但我就是这样做的。 我对替代品持开放态度。

无论如何，它的效果并不好。 到目前为止，我只能获得需要显示在我想要的位置的三个字符串之一。 我将在发布代码后进行更多解释。

已经尝试过：

十几个不同版本的代码，包括在列表中创建一个简单的 v-for 来完成这项工作，以及带有/不带有字典或数组的各种版本。

在我对这个问题的研究中，我浏览了 VueJS 文档，谷歌搜索了一些东西，但一无所获。

在 App.vue 中（我试图删除所有不相关的东西）：

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">

        <TweetDeck v-on:messageFromTweetDeck="msgReceived($event)"/>

        <!-- <ul>
            <li v-for="(tweet, index) in tweets" :key="index">{{ tweet }}</li>
        </ul>-->

        <TwitterMsg v-for="(tweet, index) in tweets" :key="index" 
        :name="tweet.name" :handle="tweet.handle" tsp=3 :msg="tweet.tweet" />

        <TwitterMsg name="aaa" handle='aaa'
        tsp=50 msg="hey this is a message on twitter"/>


        <input type="text" v-model="placeholderText"/>

    </div>
</template>

<script>
import TwitterMsg from './components/TwitterMsg.vue'
import TweetDeck from './components/TweetDeck.vue'

export default {
    name: 'app',
    components: {
        TwitterMsg,
        TweetDeck

    },

    data: function() {
        return {
            tweets: [],
            message: "",
            placeholderText: ""
        }
    },

    methods: {
        msgReceived(theTweet, name, handle) {
            this.tweets.push({tweet: theTweet, name: name, handle: handle})
        }
    }
}
</script>

在 TweetDeck.vue 中：

<template>
    <div>
        <input type='text' v-model="yourName">
        <input type='text' v-model="yourHandle">
        <input type='text' v-model="yourTweet"/>
        <button type='button' @click="sendTweet()">Tweet</button>
    </div>
</template>

<script>
    export default {
        name: "TweetDeck",

    data: function() {
        return {
            yourName: "Your name here",
            yourHandle: "Your twitter handle",
            yourTweet: "What's going on?"
        }
    },

    methods: {
        sendTweet() {
            this.$emit('messageFromTweetDeck', this.yourTweet, this.yourName, this.yourHandle);

        }
    }
}

</script>

您还可以在此处查看最不重要的 TwitterMsg.vue（出于学习目的，我正在尝试复制 Twitter：

<template>
    <div>
        <h4>{{ name }}</h4>
        <span>@{{ handle }}</span>
        <span> {{ tsp }}</span> <!-- Time Since Posting = tsp -->
        <span>{{ msg }}</span>
        <img src='../assets/twit_reply.png'/><span>1</span>
        <img src="../assets/twit_retweet.png"/><span>2</span>
        <img src="../assets/twit_fave.png"/><span>3</span>

    </div>
</template>

<script>
    export default {
        name: "TwitterMsg",
        props: {
            name: String,
            handle: String,
            tsp: String,
            msg: String
        }
    }
</script>

<style>
    img {
        width: 30px;
        height: 30px;
    }
</style>

预期结果：每次单击“Tweet”按钮时，代码都会使用适当的名称、句柄和消息数据填充一个新的 TwitterMsg 组件。

实际结果：我的代码无法帮助将名称和句柄字符串从 TweetDeck.vue 中的输入文本框一直到 TwitterMsg.vue 中的主页。

我会说 TweetDeck.vue 中的 this.yourTweet 确实设法让它一直到达目的地，这很好——尽管这让我想知道为什么其他两条数据没有遵循。

完全迷失了。 也只是在我使用 VueJS 的第一个月，所以我什至可以让一个字符串出现在我想要的位置。 \o/

Answer 1

首先，您需要删除$event参数

<TweetDeck v-on:messageFromTweetDeck="msgReceived"/>

其次，可以优化传递给父组件的数据格式：

sendTweet() {
  this.$emit("messageFromTweetDeck",
    { tweet: this.yourTweet, name: this.yourName, handle: this.yourHandle }
  );
}

然后修改你的msgReceived方法：

msgReceived(childData) {
  this.tweets.push(childData);
}

链接： codesandbox

希望能帮到你：）