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

根据您的问题，我认为您希望消费者的父级有权访问inputLabel组件中的<datepicker>。家长通常不了解孩子的属性（请记住inputLabel是子组件的属性，不是父级的属性。）

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

安装datepicker组件时，使用vm.$emit发出自定义事件，例如datepickermounted。然后，消费者父母可以使用v-on:datepickermounted收听此事件并从子组件
vm.$emit可以包含有效内容，其中包含组件的唯一ID，以及组件的关联inputLabel
父级有一个数组，比如说datepickers，它存储了这些发出的数据。父级侦听自定义事件，并在接收到它后将其推送到自己的数据。现在，父母也可以访问所有<datepicker>子组件＆＃39; inputLabel :)

＆＃13;

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);
    }
  }
});

＆＃13;

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

＆＃13;

或者，您可以使用refs访问该组件，但要注意vm.$refs 不响应（例如inputLabel更新后，您不会看到它改变！）。

＆＃13;

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);
    });
  }
});

＆＃13;

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

＆＃13;

Answer 2

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>

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

2 个答案: