Vue js从html中的组件标签传递道具

Posted 2023-02-23

【中文标题】Vue js从html中的组件标签传递道具

【英文标题】：Vue js pass props from component tag in html

【发布时间】：2018-09-23 18:09:36

【问题描述】：

我在 html 中有一个 vue 组件，想将 props 传递给 js 代码并向下传递给 vue 组件。

所以在我的html index.html中

<div id="js-group-discounts">
  <div class="form-group required">
    <datepicker
      input-label="From">
    </datepicker>
  </div>
  <div class="form-group required">
    <datepicker
      input-label="To">
    </datepicker>
  </div>
</div>

然后在我的js中

  import Vue from "vue"
  import Datepicker from "../components/DatePicker"

  Vue.use(Datepicker)    
  new Vue(
   el: "#js-group-discounts",
   props: 
    inputLabel: 
     type: String,
  ,
,
components: 
  Datepicker,
,
mount: 
  console.log(this.inputLabel) // returns undefinend
 ,
)

这是 Datepicker 子组件

<template>
 <div >
    <label for="for">label</label>
    <input  type="text"
            class="form-control form-control-info"
            placeholder="dd/mm/yyyy"
            name="this.label"
            id="this.label"
            pattern="\d1,2/\d1,2/\d4"
            required
            v-model="isInput"
            v-on:keyup="updateCalendar($event)"
            ref="startdate"
            @blur="blur"
            @focus="focus">
    <datepicker format="dd/MM/yyyy"
                id="start_calendar"
                input-class="form-control"
                placeholder="dd/mm/yyyy"
                v-model="isPicker"
                :inline="true"
                v-show="isOpen"
                @mouseover.native="mouseOver"
                @selected="updateInput"></datepicker>
  </div>
</template>

<script>
 import Vue from "vue"
 import Datepicker from "vuejs-datepicker"
 Vue.use(Datepicker)

 export default 
    name: "datepicker",
    components: 
        Datepicker
    ,

最终我想在数据中将它传递给子组件，但不能通过从 html 传递值的这一点。有什么帮助吗？

【问题讨论】：

查看这个答案***.com/a/48319821/4525120

@divine 他们在 js 中设置值。我想传递html中设置的prop的值

所有值都应该存储在 javascript 对象中。如果您想将任何值从父级传递给子级，则必须将相应的 javascript 对象从父级发送到子级。

所以你不能将组件添加到 html 并让服务器端代码集属性传递下来？这似乎是它应该做的事情。我很难相信这是不可能的。

您的目标是将数据从父组件传递到子组件，对吗？

【参考方案1】：

var Datepicker = Vue.component('datepicker', 
  template: '#datepicker',
  props: 
    inputLabel: 
      type: String
    
  
);

new Vue(
  el: "#js-group-discounts",
  components: 
    Datepicker
  ,
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="js-group-discounts">
  <div class="form-group required">
    <datepicker input-label="datepickerLabel1"></datepicker>
  </div>
  <div class="form-group required">
    <datepicker input-label="datepickerLabel2"></datepicker>
  </div>
</div>

<script type="text/template" id="datepicker">
  <div class="dummy">
    I am a dummy datepicker component<br /> My label is this.inputLabel.
  </div>
</script>

【参考方案2】：

根据您的问题，我认为您希望消费父级能够访问 <datepicker> 组件中的 inputLabel。父组件通常不知道子组件的属性（请记住，inputLabel 是子组件的属性，不是父组件的属性）。

在这种情况下，您可能需要使用以下策略：

在安装日期选择器组件时，使用vm.$emit 发出自定义事件，例如datepickermounted。然后消费父级可以使用v-on:datepickermounted 监听此事件并从子组件接收数据 vm.$emit 可以有一个负载，其中包含组件的唯一 ID，以及组件的关联 inputLabel 父级有一个数组，比如datepickers，用于存储这些发出的数据。父级监听自定义事件，并在接收到它后，将其推送到自己的数据中。现在父组件也可以访问所有<datepicker> 子组件的inputLabel :)

var Datepicker = Vue.component('datepicker', 
  template: '#datepicker',
  props: 
    inputLabel: 
      type: String
    
  ,
  mounted() 
    // Let parent know that a new datepicker has been mounted
    this.$emit('datepickermounted', 
      id: this._uid,
      label: this.inputLabel
    );
  
);

new Vue(
  el: "#js-group-discounts",
  data: 
    datepickers: []
  ,
  components: 
    Datepicker
  ,
  methods: 
    storeDatepickerLabel(payload) 
      this.datepickers.push(payload);
    
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="js-group-discounts">
  <div class="form-group required">
    <datepicker input-label="datepickerLabel1" v-on:datepickermounted="storeDatepickerLabel"></datepicker>
  </div>
  <div class="form-group required">
    <datepicker input-label="datepickerLabel2" v-on:datepickermounted="storeDatepickerLabel"></datepicker>
  </div>
  
  <hr />
  
  <ul>
    <li v-for="(dp, index) in datepickers" :key="index">
      <strong>Datepicker id</strong>:  dp.id <br />
      <strong>Datepicker label</strong>:  dp.label 
    </li>
  </ul>
</div>

<script type="text/template" id="datepicker">
  <div class="dummy">
    I am a dummy datepicker component<br /> My label is this.inputLabel.
  </div>
</script>

---

或者，您可以使用refs 访问该组件，但请注意vm.$refs 是非响应式（例如，如果inputLabel 得到更新，您将不会看到它发生变化！ )。

var Datepicker = Vue.component('datepicker', 
  template: '#datepicker',
  props: 
    inputLabel: 
      type: String
    
  
);

new Vue(
  el: "#js-group-discounts",
  components: 
    Datepicker
  ,
  mounted() 
    this.$nextTick(function() 
      console.log(this.$refs.datepicker1.inputLabel);
      console.log(this.$refs.datepicker2.inputLabel);
    );
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="js-group-discounts">
  <div class="form-group required">
    <datepicker input-label="datepickerLabel1" ref="datepicker1" ></datepicker>
  </div>
  <div class="form-group required">
    <datepicker input-label="datepickerLabel2" ref="datepicker2" ></datepicker>
  </div>
</div>

<script type="text/template" id="datepicker">
  <div class="dummy">
    I am a dummy datepicker component<br /> My label is this.inputLabel.
  </div>
</script>

【讨论】：

感谢您的示例。似乎还有很长的路要走，尤其是写出那个循环。没有办法直接访问这个道具

@Adam 不，但你也可以使用ref :) 不鼓励！

可以添加标准的html数据属性吗？

@Adam 我仍然不知道“传递它”对您意味着什么。您要将日期选择器 inputLabels 传递到哪里？ p/s：查看更新的答案以使用vm.$refs

作为组件 的属性放置在 html 中。然后将其传递给 .js 文件，然后将其传递给 .vue 文件。我以为它是那个方向根（html），父（js），子（vue组件）