C# 将数据传递到Vue.js组件

我在向vue组件传递数据时遇到了一个问题

.cshtml

文件如下所示：

@using Newtonsoft.Json;

@{
    var myString = "Hello world";
    var myJsonData = JsonConvert.SerializeObject(model);
}

<div id="gallery">
    <Gallery my-jsonprop="@myJsonData" 
             :my-jsonprop2="@myJsonData" 
             my-text="Hello world" 
             :my-text2="@myString" 
             v-bind:my-text3="@myString"></Gallery>
</div>

<template>
    <div>
        <p>{{ test }}</p>
        <p>{{ myJsonProp }}</p>
        <p>{{ myJsonProp2 }}</p>
        <p>{{ myText }}</p>
        <p>{{ myText2 }}</p>
        <p>{{ myText3 }}</p>
    </div>
</template>

<script>
    export default {
        name: 'Gallery',
        props: {
            myJsonprop: {
                type: Object,
                required: true
            },
            myJsonprop2: {
                type: Object,
                required: true
            },
            myText: {
                type: String,
                required: true
            },
            myText2: {
                type: String,
                required: true
            },
            myText3: {
                type: String,
                required: true
            }
        },
        computed: {
            test() {
                return "Foo bar"
            },
        }
    };
</script>

import Vue from "vue";
import Gallery from "../Gallery.vue"

new Vue({
    el: '#gallery',
    render: h => h(Gallery)
});

…最后，我的

main.js

如下所示：

@using Newtonsoft.Json;

@{
    var myString = "Hello world";
    var myJsonData = JsonConvert.SerializeObject(model);
}

<div id="gallery">
    <Gallery my-jsonprop="@myJsonData" 
             :my-jsonprop2="@myJsonData" 
             my-text="Hello world" 
             :my-text2="@myString" 
             v-bind:my-text3="@myString"></Gallery>
</div>

<template>
    <div>
        <p>{{ test }}</p>
        <p>{{ myJsonProp }}</p>
        <p>{{ myJsonProp2 }}</p>
        <p>{{ myText }}</p>
        <p>{{ myText2 }}</p>
        <p>{{ myText3 }}</p>
    </div>
</template>

<script>
    export default {
        name: 'Gallery',
        props: {
            myJsonprop: {
                type: Object,
                required: true
            },
            myJsonprop2: {
                type: Object,
                required: true
            },
            myText: {
                type: String,
                required: true
            },
            myText2: {
                type: String,
                required: true
            },
            myText3: {
                type: String,
                required: true
            }
        },
        computed: {
            test() {
                return "Foo bar"
            },
        }
    };
</script>

import Vue from "vue";
import Gallery from "../Gallery.vue"

new Vue({
    el: '#gallery',
    render: h => h(Gallery)
});

---

但在显示test的计算值时，这两个属性都不会传递给组件。我遗漏了什么吗？

传递道具的正确方法是将CamelCase变量更改为破折号大小写名称 因此，在您的组件中，将如下所示：

@using Newtonsoft.Json;

@{
    var myString = "Hello world";
    var myJsonData = JsonConvert.SerializeObject(model);
}

<div id="gallery">
    <Gallery my-jsonprop="@myJsonData" 
             :my-jsonprop2="@myJsonData" 
             my-text="Hello world" 
             :my-text2="@myString" 
             v-bind:my-text3="@myString"></Gallery>
</div>

<template>
    <div>
        <p>{{ test }}</p>
        <p>{{ myJsonProp }}</p>
        <p>{{ myJsonProp2 }}</p>
        <p>{{ myText }}</p>
        <p>{{ myText2 }}</p>
        <p>{{ myText3 }}</p>
    </div>
</template>

<script>
    export default {
        name: 'Gallery',
        props: {
            myJsonprop: {
                type: Object,
                required: true
            },
            myJsonprop2: {
                type: Object,
                required: true
            },
            myText: {
                type: String,
                required: true
            },
            myText2: {
                type: String,
                required: true
            },
            myText3: {
                type: String,
                required: true
            }
        },
        computed: {
            test() {
                return "Foo bar"
            },
        }
    };
</script>

import Vue from "vue";
import Gallery from "../Gallery.vue"

new Vue({
    el: '#gallery',
    render: h => h(Gallery)
});

请注意，如果传递javascript变量，则需要使用“v-bind”或在prop名称前添加冒号（：）

如果它只是一个纯文本，那么就不需要“v-bind”

my-text="Hello world" 

---

有关这方面的更多详细信息，请检查

传递道具的正确方法是将CamelCase变量更改为破折号case名称 因此，在您的组件中，将如下所示：

@using Newtonsoft.Json;

@{
    var myString = "Hello world";
    var myJsonData = JsonConvert.SerializeObject(model);
}

<div id="gallery">
    <Gallery my-jsonprop="@myJsonData" 
             :my-jsonprop2="@myJsonData" 
             my-text="Hello world" 
             :my-text2="@myString" 
             v-bind:my-text3="@myString"></Gallery>
</div>

<template>
    <div>
        <p>{{ test }}</p>
        <p>{{ myJsonProp }}</p>
        <p>{{ myJsonProp2 }}</p>
        <p>{{ myText }}</p>
        <p>{{ myText2 }}</p>
        <p>{{ myText3 }}</p>
    </div>
</template>

<script>
    export default {
        name: 'Gallery',
        props: {
            myJsonprop: {
                type: Object,
                required: true
            },
            myJsonprop2: {
                type: Object,
                required: true
            },
            myText: {
                type: String,
                required: true
            },
            myText2: {
                type: String,
                required: true
            },
            myText3: {
                type: String,
                required: true
            }
        },
        computed: {
            test() {
                return "Foo bar"
            },
        }
    };
</script>

import Vue from "vue";
import Gallery from "../Gallery.vue"

new Vue({
    el: '#gallery',
    render: h => h(Gallery)
});

请注意，如果传递javascript变量，则需要使用“v-bind”或在prop名称前添加冒号（：）

如果它只是一个纯文本，那么就不需要“v-bind”

my-text="Hello world" 

---

关于这方面的更多细节，请查看

，所以经过大量研究，我自己已经找到了答案。我的

webpack.config.js

似乎缺少使用单文件组件的关键点：

resolve: {
    extensions: [".ts", ".tsx", ".js", ".js", ".vue", ".json"],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.join(__dirname, "dist")
    }
}

---

这完全解决了我的问题

所以经过大量的研究，我自己已经找到了答案。我的

webpack.config.js

似乎缺少使用单文件组件的关键点：

resolve: {
    extensions: [".ts", ".tsx", ".js", ".js", ".vue", ".json"],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.join(__dirname, "dist")
    }
}

---

这完全解决了我的问题

当您选择查看源代码时，HTML是如何显示的？它只是呈现容器和计算值，如

Foo bar

当您选择查看源代码时，HTML是如何显示的？它只是呈现容器和计算值，如

Foo bar

否，这也不起作用。我试图像您建议的那样简单地传递字符串，但是vue devtools仍然将属性的值显示为未定义。。。我已经更新了问题以匹配你的建议答案否，这也不起作用。我试图像您建议的那样简单地传递字符串，但是vue devtools仍然将属性的值显示为未定义。。。我已经更新了问题以匹配您建议的答案