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

Question

我在 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="\d{1,2}/\d{1,2}/\d{4}"
            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 传递值的这一点。有什么帮助吗？

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

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