將子組件中的文本字段鏈接到 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

希望能幫到你：）