VueJS 组件与 BootstrapVue 组件的值绑定

Question

我正在开发一个使用 VueJS 作为前端框架的 laravel 项目，但我对 vueJs 还是很陌生。目前，我有一个来自 bootstrapVue 的名为 DatePicker 的组件，如下所示：

<template>
  <div>
    <label for="example-datepicker">Choose a date</label>
    <b-form-datepicker id="example-datepicker" v-model="value" class="mb-2"></b-form-datepicker>
    <p>Value: '{{ value }}'</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

我想将它导入到单独的 vue 文件中的多个 vue.js 表单中。

但是有一件事我不知道如何实现，当我在文件中导入日期选择器组件时，当我提交表单时，我怎样才能在日期选择器中提交值用户输入呢？由于数据传递给日期选择器组件而不是存储在文件中，有什么方法可以将日期组件值与表单文件值同步？

Answer 1

尝试如下 sn-p： 将日期作为道具发送到您的日期选择器组件:val="val"，将接收日期分配为值value: this.val，观察日期变化并发出事件this.$emit('changed', this.value)。在父组件中监听来自子 @changed="changed" 的事件并更新方法中的值。

Vue.component('Child', {
  template: `
    <div>
      <label for="example-datepicker">Choose a date</label>
      <b-form-datepicker id="example-datepicker" v-model="value" class="mb-2"></b-form-datepicker>
      <p>Value: '{{ value }}'</p>
    </div>
  `,
  props: ['val'],
  data() {
    return {
      value: this.val
    }
  },
  watch: {
    value() {
      this.$emit('changed', this.value)
    }
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      val: new Date()
    }
  },
  methods: {
    changed(val) {
      this.val = val
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="demo">
  <h3>Date from child component : {{ val }}</h3>
  <Child :val="val" @changed="changed" />
<demo>