如何使用 Vue 传递动态道具答案

【问题标题】：How to pass dynamic props with Vue如何使用 Vue 传递动态道具
【发布时间】：2020-08-10 12:48:27
【问题描述】：

我需要使用 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)

【问题讨论】：

标签： vue.js vuejs2

【解决方案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

【讨论】：

【解决方案2】：

您几乎可以通过任何方式，并且可以通过多种方式实现。这里有 4 个例子：

注意：对于所有选项，我们假设您有一个使用以下语法的父组件

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

Option1： props 作为字符串数组的列表。值可以是 JS 中的任何内容，即数字、字符串、对象、函数


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

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

选项 2： 最常见的方法。每个道具都是特定类型的值。在这些情况下，您可以将道具列为对象，其中属性的名称和值分别包含道具名称和类型

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

【讨论】：

感谢您的评论！！我正在尝试使用approche 3但没有成功。我将使用更新的代码编辑我的问题