Vue：模板道具问题答案

【问题标题】：Vue: template props issueVue：模板道具问题
【发布时间】：2017-03-28 07:21:49
【问题描述】：

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

这是模板：自定义输入.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>

【问题讨论】：

您要分配哪个值？这两个vue文件是什么关系？

标签： vuejs2 vue-component

【解决方案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 很棒 ;)

【讨论】：