Передать данные в компонент Vue. js

Question

У меня проблема с передачей данных в компонент 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>

... и Gallery.vue компонент примерно такой:

<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>

... и, наконец, мой main.js выглядит так:

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

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

Но ни одно из свойств не передается компоненту, в то время как вычисленное значение теста отображается. Я что-то упустил?

Answer 1

Итак, после чрезмерных исследований, я понял это сам. Казалось, что мой webpack.config.js отсутствует на критически важной вещи для использования отдельных файловых компонентов:

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

Это решило это для меня полностью!

Answer 2

Правильный метод для передачи реквизитов - это изменение переменной CamelCase на имя с именем da sh, поэтому ваш компонент будет выглядеть так:

 <Gallery :my-json-prop="@myJsonData" 
             :my-json-prop2="@myJsonData" 
             my-text="Hello world" 
             :my-text2="@myString" 
             v-bind:my-text3="@myString"></Gallery>

Обратите внимание, что если вы передаете javascript переменная, вам нужно либо использовать 'v-bind', либо добавить двоеточие (:) перед именем реквизита.

, если это простой текст, тогда вам не нужен 'v-bind '

my-text="Hello world" 

Более подробно об этом, пожалуйста, проверьте официальную vue документацию