vue.js - 通过安装应用程序的元素上的属性将 Prop 传递给 Vue 根实例

Question

我对 Vue 非常陌生，所以如果我的术语不正确，请原谅我。我有一个 .NET Core MVC 项目，其中包含小的、单独的 vue 页面。在我当前的页面上，我从 Controller 返回一个 View ，它只有:

@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 安装它喜欢:

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>

Answer 1

似乎将 Prop 传递给放置在应用程序正在安装的元素上的根实例 vie 属性 is not supported
您可以使用 data- 解决它属性很容易
View 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>

View 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- attributes 是一个字符串，因此如果您的组件需要其他内容( 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>

只是一个想法(不是真正的问题)
不太确定，但这可能是 Props casing 的问题
HTML 属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写。这意味着当你使用 DOM 模板时，camelCased Prop 名称需要使用它们的 kebab-cased(连字符分隔)等价物
尝试将您的 MVC View 更改为:

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