Vue3組件未呈現但顯示在元素樹上

我是 vue 的新手，我試圖將我的一個組件更改為新語法以學習 vue 3。該組件在更改前運行良好，所以我一定遺漏了一些東西。

這是母組件：

<template>
  <div class="user-profile">
    <div>
      <div class="user-profile__user-panel">
        <h1 class="user-profile__username">@{{ user.username }}</h1>
        <div v-if="user.isAdmin" class="user-profile__admin-badge">Admin</div>
        <div class="user-profile__follower-count">
          <string><b>Followers: </b></string> {{ followers }}
        </div>
      </div>
      <NewTwoot @create-twoot="createNewTwoot" />
    </div>
    <div class="user-profile__twoots-wraper">
      <TwootItem
        v-for="twoot in user.twoots"
        :username="user.username"
        :key="twoot.id"
        :twoot="twoot"
        @favorit="toggleFavorite(id)"
      />
    </div>
  </div>
</template>

<script>
import TwootItem from "./TwootItem.vue";

export default {
  name: "UserProfile",
  components: {
    TwootItem,
  },
  data() {
    return {
      followers: 0,
      user: {
        id: 1,
        username: "GabrielBG",
        firstName: "Gabriel",
        lastName: "Gutierrez",
        email: "[email protected]",
        isAdmin: true,
        twoots: [
          {
            id: 2,
            content: "This is my second twoot",
          },
          {
            id: 3,
            content: "This is my third twoot",
          },
          {
            id: 1,
            content: "This is my first twoot",
          },
        ],
      },
    };
  },
  watch: {
    followers(newFollowerCount, oldFollowerCount) {
      if (oldFollowerCount > newFollowerCount) {
        console.log("You lost a follower!");
      } else {
        console.log("You gained a follower!");
      }
    },
  },
  computed: {
    fullName() {
      return this.user.firstName   " "   this.user.lastName;
    },
  },
  methods: {
    followUser() {
      this.followers  ;
    },
    toggleFavorite(id) {
      console.log("Toggling favorite for twoot with id: "   id);
    },
    createNewTwoot(newTwootContent) {
      this.user.twoots.unshift({
        id: this.user.twoots.length   1,
        content: newTwootContent,
      });
    },
  },
  mounted() {
    this.followUser();
  },
};
</script>

這是重構但現在不呈現的組件：

<template>
  <form class="create-twoot" @submit.prevent="createNewTwoot">
    <lable for="new-twoot"
      ><strong>New Twoot</strong> ({{ newTwootCharCount }}/180)
    </lable>
    <textarea id="new-twoot" rows="5" v-model="state.newTwootContent" />
    <div class="create-twoot-type">
      <lable for="twoot-type">
        <strong>Twoot Type</strong>
      </lable>
      <select id="twoot-type" v-model="state.selectedTwootType">
        <option
          :value="option.value"
          v-for="(option, index) in state.twootTypes"
          :key="index"
        >
          {{ option.name }}
        </option>
      </select>
    </div>
    <button
      type="submit"
      :disabled="
        newTwootContent.length === 0 ||
        newTwootContent.length > 180 ||
        newTwootType == 'draft'
      "
    >
      Twoot
    </button>
  </form>
</template>

<script>
import { reactive, computed } from "vue";
export default {
  name: "NewTwoot",
  setup(_props, ctx) {
    const state = reactive({
      newTwootContent: "",
      selectedTwootType: "instant",
      twootTypes: [
        { value: "draft", name: "Draft" },
        { value: "instant", name: "Instant Twoot" },
      ],
    });

    const newTwootCharCount = computed(() => state.newTwootContent.length);

    function createNewTwoot() {
      ctx.emit("create-twoot", state.newTwootContent);
      state.newTwootContent = "";
    }

    return {
      state,
      newTwootCharCount,
      createNewTwoot,
    };
  },
};
</script>

我可以在元素樹上看到它，但它看起來<newtwoot></newtwoot>好像是空的。

uj5u.com熱心網友回復：

我看到兩個錯誤：

1. 您只匯入TwootItem父級而不匯入NewTwoot. 這解釋了為什么它沒有正確呈現。
2. 您沒有在子組件中定義發射，請在此處查看我的答案： vue 3 發出警告“無關的非發射事件偵聽器”

因此，匯入缺失的組件import NewTwoot from "./NewTwoot.vue";并將其添加到組件中應該可以解決問題：

components: {
    NewTwoot,
    TwootItem,
}

標籤：

上一篇：在Vuejs中為<select>選項設定默認動態值

下一篇：如何在Vue外部進行方法呼叫和v-shows