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

4xrmg8kj  于 2022-11-17  发布在  Vue.js
关注(0)|答案(5)|浏览(145)

我对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挂载它,如下所示:

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

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

如何将我的faqCategoryId导入vue应用程序以启动初始化并加载对象?我的v-bind尝试似乎不起作用-我在vue组件上有一个@Prop(Number) readonly faqCategoryId: number = 0;,但它始终是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>
t0ybt7op

t0ybt7op1#

似乎是将props传递给根示例vie属性,这些属性放置在应用程序装载到is not supported上的元素上
您可以使用data-属性轻松解决此问题
第二代
第一个
第三代
第一个
最大的缺点是从data-属性中提取的所有内容都是字符串,因此如果组件需要其他内容(NumberBoolean等),则需要自己进行转换。
当然,还有一个选择是将组件向下推一层,只要使用v-bind:counter),就会将正确的JS类型传递到组件中:
第一个

只是一个想法(不是真实的的问题)

不是很确定,但它可能是一个问题,与道具 shell

  • HTML属性名称不区分大小写,因此浏览器会将任何大写字符解释为小写。这意味着当您使用DOM中的模板时,camelCased属性名称需要使用它们的kebab大小写(连字符分隔)等效项 *

尝试将MVC视图更改为:

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

bvk5enib2#

对于Michal Levý's关于Vue 3的回答,您还可以使用单个文件组件实现该模式:

应用程序.html

<div id="app" data-message="My Message"/>

应用程序.js

import { createApp } from 'vue';
import MyComponent from './my-component.vue';
const mountEl = document.querySelector("#app");

Vue.createApp(MyComponent, { ...mountEl.dataset }).mount("#app");

我的组件.vue

<template>
  {{ message }}
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

或者,您甚至可以从父HTML页面上的任何位置获取数据,例如:

应用程序.html

<h1>My Message</h1>
<div id="app"/>

应用程序.js

import { createApp } from 'vue';
import MyComponent from './my-component.vue';
const message = document.querySelector('h1').innerText;

Vue.createApp(MyComponent, { message }).mount("#app");

我的组件.vue

<template>
  {{ message }}
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

要回答TheStoryCoder's问题:您需要使用一个数据属性。我上面的答案演示了如何在挂载时将一个值从父DOM传递到Vue应用程序。如果您想在挂载后更改message的值,您需要这样做(为了清楚起见,我将数据属性命名为myMessage,但您也可以使用相同的属性名称message):

<template>
  {{ myMessage }}
  <button @click="myMessage = 'foo'">Foo me</button>
</template>

<script>
export default {
  props: {
    message: String
  },
  data() {
    return {
      myMessage: this.message
    }
  }
};
</script>
ncgqoxb0

ncgqoxb03#

因此,我对.NET和模型所做的事情一点也不熟悉,但Vue将DOM元素仅视为占位符,它不会向它扩展与应用程序中的组件相同的功能。
所以v-bind是不起作用的,即使没有React性的值,也没有选择。
您可以尝试黑客访问该值并将其分配给数据,例如...
第一个
在这里,你从html dom元素中获取值,并赋值给一个data。我建议使用data而不是props的原因是props被设置为只写,所以你不能覆盖它们,所以我使用了一个变量props来定义要在dom元素中查找的props。

另一个选项

就是使用inject/provide
只使用js来提供变量会更简单,但假设您希望在mvc框架中使用它,因此它只通过视图来管理。此外,您可以通过选择您希望传递给应用程序的确切属性来使其更简单,但这提供了一个更好的“框架”以供重用。
第一次

jqjz2hbq

jqjz2hbq4#

正如我在下面的示例中所尝试的那样。

https://codepen.io/boussadjra/pen/vYGvXvq

您可以执行以下操作:

mounted() {
 console.log(this.$el.parentElement.getAttribute("faqCategoryId"));
}
eqqqjvef

eqqqjvef5#

所有其他答案可能都有效,但对于Vue 3,简单的方法是:

import {createApp} from 'vue'

import rootComponent from './app.vue'

let rootProps = {};

createApp(rootComponent, rootProps)
   .mount('#somewhere')

相关问题