如何将参数从 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 } });