Question

我需要使用Vue传递道具，我想到了带有包含名称和值的对象的JSON。我需要将数据传递到其他组件，但是它会随着每次事件的名称和值发生变化而发生变化。因此，例如，我可能具有以下名称：'a'值：'b'，名称：'f'值：'k'以及其他事件中的名称：'c'值：'d' 我的代码有效，但因为我返回了硬编码数据，所以它有效

from matplotlib import pyplot as plt
import numpy as np

plt.figure()          
N = 5
menMeans = (20, 35, 30, 35, 27)
menStd = (2, 3, 4, 1, 2)
width = 0.35       # the width of the bars
womenMeans = (25, 32, 34, 20, 25)
womenStd = (3, 5, 2, 3, 3)    
ind = np.arange(N)
plt.ylim(0.0, 65.0)
plt.bar(ind, menMeans, width, color='r', yerr=menStd, label='Men means')
plt.bar(ind+width, womenMeans, width, color='y', yerr=womenStd, label='Women means')
plt.ylabel('Bar plot')      

x = np.linspace(0, N)
y = np.sin(x)
axes2 = plt.twinx()
axes2.plot(x, y, color='k', label='Sine')
axes2.set_ylim(-1, 1)
axes2.set_ylabel('Line plot')

plt.show()

在儿童中

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

我需要从中获取数据的带有对象参数的功能

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

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>

选项1：用作字符串数组的列表。值可以是JS中的任何值，即数字，字符串，对象，函数


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

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

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

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

如何使用Vue传递动态道具

2 个答案: