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

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

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

不管怎样，它的效果并不好。到目前为止，我只能得到三个字符串中的一个，我需要显示在我想要的地方。在我发布代码后，我会解释更多

已尝试：

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

在我对这个问题的研究中，我浏览了VueJS文档，在谷歌上搜索了一些东西，但什么也没找到

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

从“./components/TwitterMsg.vue”导入TwitterMsg
从“./components/TweetDeck.vue”导入TweetDeck
导出默认值{
名称：“应用程序”，
组成部分：{
推特味精，
我们想让
},
数据：函数（）{
返回{
tweets:[]，
消息：“”，
占位符文本：“
}
},
方法：{
msgReceived（日期、名称、句柄）{
this.tweets.push（{tweet:theTweet，name:name，handle:handle}）
}
}
}

在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>

推特
导出默认值{
名称：“TweetDeck”，
数据：函数（）{
返回{
你的名字：“你的名字在这里”，
yourHandle:“你的twitter句柄”，
yourTweet：“发生了什么事？”
}
},
方法：{
sendTweet（）{
this.emit（'messageFromTweetDeck'，this.yourTweet，this.yourName，this.yourHandle）；
}
}
}

您还可以在此处看到最不重要的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>

{{name}}
@{{handle}}
{{tsp}}
{{msg}}
1.
2.
3.
导出默认值{
名称：“TwitterMsg”，
道具：{
名称：String，
句柄：字符串，
tsp：字符串，
msg:String
}
}
img{
宽度：30px；
高度：30px；
}

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

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

我要说的是，TweetDeck.vue中的this.yourTweet确实成功地到达了目的地，这很好——尽管这让我想知道为什么其他两条数据没有跟随它

---

完全丢失。也是在我使用VueJS的第一个月，所以我甚至可以让一个字符串显示在我想要的位置，这非常好。\o/

首先，您需要删除

$event

参数

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

然后修改您的

msgReceived

方法：

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

链接：

---

希望对您有所帮助：）

您能提供一个可以像代码片段一样在线运行的代码吗？这不是问题，但将来在执行v-for时可能会出现问题。请尝试命名您的密钥，就像您在页面上有多个v-for一样（与您当前的情况相同），这可能会导致问题，因为密钥是重复的，因为0不是唯一的。尝试使用

：key=“`tweet\u${index}`”

不客气：）如果它对您有帮助，请接受我的答案：）

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

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