如何將參數從 Vue root 傳遞到組件？

Question

我試圖將一個字符串從 index.cshtml 傳遞給 vue 根元素。

我試圖傳遞的參數是：userId

查看：Index.cshtml（這是我獲取參數的地方）

@using Microsoft.AspNetCore.Identity
@inject SignInManager<User> SignInManager
@using LaBouteilleDamour.Domain.Models;
@inject UserManager<User> UserManager

@if (SignInManager.IsSignedIn(User))
{
    User user = await UserManager.GetUserAsync(User);
    var userid = UserManager.GetUserId(User);

    <div id="cartApp" userId:"userid"></div>
    <script src="./js/Cart.bundle.js" asp-append-version="true"></script>
}

Vue 根目錄：Cart.boot.ts

import Vue from "vue";
import Cart from "./Components/Cart.vue";

new Vue({
    el: "#cartApp",
    template: '<Cart :userId="userId" />',
    props: {
    *userId: String,
    },
    components: {
        Cart
    }
});

Vue 組件：Cart.vue（我需要參數去的地方）

<template>
 /*HTML*/
</template>

<script lang="ts">
    import ShoppingCartItem from "../Components/ShoppingCartItem.vue";
    import ShoppingCartService, { ICartItem } from "./AP
/ShoppingCartService";
    import Vue from "vue";


    interface IShoppingCartpageData {
        items: ICartItem[],

    }

    export default Vue.extend({
        data(): IShoppingCartpageData {
            return {
                items: [],
            }
        },
        props: {
            userId: {
                type: String,
                required:true,
            }
        },
        ...
    })
</script>

Answer 1

您正在模板中傳遞“userId”，但 userId 未在 vue 的數據函數中定義，因此不是響應式的，這意味着您不能在 DOM 中使用它，除非您在數據函數中聲明它。

根視圖也不需要道具，道具應該只有組件將從父組件接收的那些元素。

所以你的根元素代碼必須是這樣的

 import Vue from "vue"; import Cart from "./Components/Cart.vue"; new Vue({ el: "#cartApp", template: '<Cart :userId="userId" />', data: function(){ return { userId: userid, // Accessing userId from global scope as it is defined in Index.cshtml. } }, components: { Cart } });