Question

我是Vue的新手，我正在尝试将道具值分配给模板......

这是模板： CustomInput.vue

<template>
<div class="col-md-6">
    <label for="" class="control-label"></label>
    <div class="input-wrapper">
        <input data-val="true" id="" name="" class="form-control" type="text">
        <span class="field-validation-valid" data-valmsg-for="" data-valmsg-replace="true"></span>
    </div>
</div>

如何从另一个文件中的自定义标记设置值：

Edit.vue

<custom-input label-value="Office" label-name="Office" input-id="Office" input-name="Office" :input-v-model="contact.office">Office</custom-input>

Answer 1

是的，这非常简单，首先，我会将您链接到官方文档：

https://vuejs.org/v2/guide/components.html#Props

那么，这将如何适用于您的代码？首先，您应该使用v-bind或速记: .. 如果你这样做，你最终会在template：

中做这样的事情

<label v-bind:id="id" :name="name"> {{ message }} </label>

在您的主应用中，您可以导入模板：

<custom-input :name="yourNameVar" :id="yourIdVar"></custom-input>

现在，您再次转到模板并使用以下命令注册道具id和name：props: [id, name]。重要的是<custom-input>中的绑定是模板中已使用变量/已注册道具的名称！

基本上，你可以这样做：

<input :id="myShinyIdProperty">

现在你的模板标签看起来像这样：

<your-template-tag :myShinyIdProperty="someVar"></...>

这是使用属性做事的正确方法，如果你想要更多，请考虑阅读整个文档，链接在上面.. Vue太棒了;）

Vue：模板道具问题

1 个答案: