Как передать Dynami c реквизит с Vue

Question

Мне нужно передать реквизиты, используя Vue, я думал о JSON с объектом, который включает в себя имя и значение. Мне нужно передать данные в другой компонент, но он меняется, так как в каждом событии меняются имена и значения. Так, например, у меня может быть имя: 'a' значение: 'b', имя: 'f' значение: 'k' и другое имя события: 'c' значение: 'd' мой код, который работает, но работает потому что я возвращаю жестко закодированные данные

data() {
    return {
        params: {
            name:'bill',
            value:'jones'
        },

в дочерней

@Component({
    props:
    {
        urls: {
        type: Object,
        default: () => { return {name:'', value: ''} }
    },
    }

функции с параметрами объекта, которые мне нужны для получения данных из

getParams(url) {

            paramsData[key] = value;
            //console.log(key,value);
        }
        return params;
        console.log(params)

Answer 1

Вы можете использовать вычисленные имена свойств

emitEvent(name, value) {
  let objectToEmit = {
    [name]: value,
  };
  this.$emit("event-name", objectToEmit);
}

Теперь name и value будут установлены в соответствии с тем, что вы передадите в emitEvent функцию.

Вы можете прочитать больше о вычисленных именах свойств по ссылке ниже
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

Answer 2

Вы можете в значительной степени пройти через все, и вы можете сделать это разными способами. Вот 4 примера:

Примечание: для всех опций мы предполагаем, что у вас есть родительский компонент, который использует следующий синтаксис

  <example-component :name="somename" :value="somevalue"></example-component>

Option1: поддерживает как список массивов строк. Значения могут быть чем угодно в JS, то есть числами, строками, объектами, функциями

<template>
    <div>
        <p v-text="example"></p>
    </div>
</template>

<script>
    export default {
        name: "ExampleComponent",
        prop: ['name','value']
    }
</script>

Опция 2: наиболее распространенный подход. Каждая опора должна быть определенного типа c. В этих случаях вы можете перечислить реквизиты как объект, где имена и значения свойств содержат имена и типы реквизитов, соответственно

<template>
    <div>
        <p v-text="example"></p>
    </div>
</template>

<script>
    export default {
        name: "ExampleComponent",
        props: {
            name: {
                type: String,
                required: false,
                default: 'something'
            },
            value: {
                type: Number,
                required: true
            }
        },
    }
</script>

Вариант 3: , который вы можете проверить или в в этом случае передаются Object и значения по умолчанию, возвращаемые фабричной функцией, поэтому у вас всегда будет какое-то значение. Вы даже можете вернуть валидацию validator: function (value) {...}

<template>
    <div>
<!--     some value from EventServiceClass-->
        <p v-text="example.name"></p>
    </div>
</template>

<script>
    import EventServiceClass from "./EventServiceClass";

    export default {
        name: "ExampleComponent",
        props: {
            example: {
                type: Object,
                default: function () {
                    return {name:'a', value: 'b'}
                }
            },
        },
    }
</script>

Вариант 4: немного более продвинутый, но в этом примере мы привязываем get и устанавливаем входные свойства формы, которые мы бы использовать для создания компонентов фабричной формы

<template>
    <div>
        <input
            id="name"
            type="text"
            v-model="name"
            class="form--input light"/>
    </div>
</template>

<script>
    export default {
        name: "ExampleComponent",
        props: {
            name: {
                type: String,
                default: ""
            }
        },
        computed: {
            name: {
                get() {
                    return this.value;
                },
                set(value) {
                    this.$emit("input", value);
                }
            }
        }

    }
</script>