1

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

2 回答 2

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上阅读有关计算属性名称的更多信息

于 2020-04-27T05:43:05.877 回答
0

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

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

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

选项1：作为字符串数组列表的道具。值可以是 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：您可以验证或在这种情况下传入一个对象和从工厂函数返回的默认值，因此您将始终拥有一些价值。您甚至可以返回验证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>
于 2020-04-27T09:17:15.717 回答