如何在HTML的Vue组件标签中向JS及组件传递Props？

看起来你已经搭好了基础框架——引入了Vue和Datepicker组件，也调用了Vue.use(Datepicker)，接下来咱们一步步把Props从JS代码传递到你的Datepicker组件里：

1. 梳理并优化HTML结构（补充Props传递入口） #

你可以在根容器js-group-discounts上通过data-*属性定义要传递的全局配置，或者直接在JS里动态生成数据。比如要给两个Datepicker分别传递不同的标签和默认日期，HTML可以这么写：

<div id="js-group-discounts" 
     data-start-label="活动开始日期" 
     data-end-label="活动结束日期"
     data-default-start="2024-01-01"
     data-default-end="2024-12-31">
  <datepicker></datepicker>
  <datepicker></datepicker>
</div>

如果不想在HTML里写死内容，也可以跳过这一步，直接在JS里定义Props数据。

2. 初始化Vue实例，向下传递Props #

接下来在JS代码里，把Props数据挂载到Vue实例，再通过绑定的方式传递给Datepicker组件，分两种场景演示：

场景一：从HTML的data属性读取Props #

如果你的配置是从后端渲染到HTML里的，用这种方式更方便：

// 你已完成的基础代码
import Vue from 'vue';
import Datepicker from 'your-datepicker-package';

Vue.use(Datepicker);

// 获取根容器的配置数据
const container = document.getElementById('js-group-discounts');
const pickerConfigs = {
  startLabel: container.dataset.startLabel,
  endLabel: container.dataset.endLabel,
  defaultStart: container.dataset.defaultStart,
  defaultEnd: container.dataset.defaultEnd
};

// 初始化Vue实例并传递Props
new Vue({
  el: '#js-group-discounts',
  data() {
    return {
      ...pickerConfigs
    };
  },
  // 直接在模板里绑定Props到子组件
  template: `
    <div>
      <datepicker :input-label="startLabel" :value="defaultStart"></datepicker>
      <datepicker :input-label="endLabel" :value="defaultEnd"></datepicker>
    </div>
  `
});

场景二：JS内动态生成Props #

如果Props是从接口请求或其他JS逻辑生成的，直接在Vue实例的data里定义即可：

import Vue from 'vue';
import Datepicker from 'your-datepicker-package';

Vue.use(Datepicker);

// 模拟从接口获取的动态配置
const dynamicConfigs = {
  startLabel: '报名开始日期',
  endLabel: '报名截止日期',
  defaultStart: new Date().toISOString().split('T')[0],
  defaultEnd: new Date(new Date().setMonth(new Date().getMonth() + 1)).toISOString().split('T')[0]
};

new Vue({
  el: '#js-group-discounts',
  data() {
    return {
      ...dynamicConfigs
    };
  },
  template: `
    <div>
      <datepicker :input-label="startLabel" :value="defaultStart"></datepicker>
      <datepicker :input-label="endLabel" :value="defaultEnd"></datepicker>
    </div>
  `
});

3. 确保Datepicker组件能接收Props #

如果是你自定义的Datepicker组件，一定要在组件内声明要接收的Props；如果是第三方组件，要先查文档确认它支持的Props名称（比如有些库用label而非input-label）。自定义组件示例：

Vue.component('datepicker', {
  // 声明接收的Props
  props: {
    inputLabel: {
      type: String,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  template: `
    <div class="datepicker-wrap">
      <label>{{ inputLabel }}</label>
      <input type="date" :value="value" @input="$emit('input', $event.target.value)">
    </div>
  `
});

关键注意点 #

• 传递Props时必须用v-bind（简写:input-label），如果直接写input-label="startLabel"，传递的是字符串"startLabel"而非变量值。
• 如果你已经在HTML里写好了<datepicker>标签，也可以直接在标签上绑定Props，不用写Vue的template，比如：

<div id="js-group-discounts">
  <datepicker :input-label="startLabel" :value="defaultStart"></datepicker>
  <datepicker :input-label="endLabel" :value="defaultEnd"></datepicker>
</div>

对应的JS里只需要初始化Vue实例并提供data即可。

内容的提问来源于stack exchange，提问作者Adam