通过安装应用程序的元素上的属性将 props 传递给 Vue 根实例

我对 Vue 非常陌生，所以如果我的术语有问题，请原谅我。我有一个 .NET Core MVC 项目，其中包含小型、独立的 vue 页面。在我当前的页面上，我从控制器返回一个视图，其中包含：

@model long;

<div id="faq-category" v-bind:faqCategoryId="@Model"></div>

@section Scripts {
    <script src="~/scripts/js/faqCategory.js"></script>
}

当我发送项目 ID 时，该页面将抓取并创建编辑表单。faqCategory.js是编译好的vue应用程序。我需要通过long初始化时传递给 vue 应用程序的参数，以便它可以获取完整的对象。我用一个安装它main.ts like:

import { createApp } from 'vue'
import FaqCategoryPage from './FaqCategoryPage.vue'

createApp(FaqCategoryPage)
    .mount('#faq-category');

我怎样才能得到我的faqCategoryId进入我的 vue 应用程序以启动初始化并加载对象？我的v-bind尝试似乎不起作用 - 我有一个@Prop(Number) readonly faqCategoryId: number = 0;在 vue 组件上，但它总是0.

我的 FaqCategoryPAge.vue 脚本很简单：

<script lang="ts">

    import { Options, Vue } from "vue-class-component";
    import { Prop } from 'vue-property-decorator'
    import Card from "@/Card.vue";
    import axios from "axios";
    import FaqCategory from "../shared/FaqCategory";
    
    @Options({
        components: {
            Card,
        },
    })
    export default class FaqCategoryPage extends Vue {
        @Prop(Number) readonly faqCategoryId: number = 0;
    
        mounted() {
            console.log(this.faqCategoryId);
        }
    }
</script>

似乎将 props 传递给根实例 vie 放置在应用程序安装的元素上的属性不支持 https://github.com/vuejs/vue/issues/6440

您可以使用以下方法解决它data-轻松属性

Vue 2

const mountEl = document.querySelector("#app");

new Vue({
  propsData: { ...mountEl.dataset },
  props: ["message"]
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" data-message="Hello from HTML">
  {{ message }}
</div>

Vue 3

const mountEl = document.querySelector("#app");

Vue.createApp({  
  props: ["message"]
}, { ...mountEl.dataset }).mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.js"></script>
<div id="app" data-message="Hello from HTML">
  {{ message }}
</div>

这样做的最大缺点是一切都取自data-属性是一个字符串，因此如果您的组件需要其他东西（Number, Boolean等）你需要自己进行转换。

当然，另一种选择是将您的组件降低一级。只要你用v-bind (:counter)，正确的 JS 类型被传递到组件中：

Vue.createApp({
  components: {
    MyComponent: {
      props: {
        message: String,
        counter: Number
      },
      template: '<div> {{ message }} (counter: {{ counter }}) </div>'
    }
  },
}).mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.js"></script>

<div id="app">
  <my-component :message="'Hello from HTML'" :counter="10" />
</div>

只是一个想法（不是真正的问题）

不太确定，但这可能是一个问题道具外壳 https://v3.vuejs.org/guide/component-props.html#prop-casing-camelcase-vs-kebab-case

HTML 属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写字符。这意味着当您使用 DOM 内模板时，驼峰命名的 prop 名称需要使用其短横线命名（连字符分隔）的等效项

尝试将您的 MVC 视图更改为：

<div id="faq-category" v-bind:faq-category-id="@Model"></div>