Vue.js 从组件vue中获取数据

我将datepicker组件添加到我的vue.js项目中：

 Vue.component('d_picker', {
    data() {
        return {
          pickerOptions: {
            shortcuts: [{
              text: 'Today',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: 'Yesterday',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: 'A week ago',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
          },
          value1: '',
        };
      },
    
      template:` 
              <div>
                <div class="block">
                  
                  <el-date-picker
                      v-model="value1"
                      type="datetime"
                      placeholder="Дата и время события">
                  </el-date-picker>
                </div>
                
              </div>
            `
            })

Vue.component（'d_picker'{
数据（）{
返回{
选择器选项：{
快捷方式：[{
正文：“今天”，
onClick（选择器）{
选择器。$emit（'pick'，new Date（））；
}
}, {
文字：“昨天”，
onClick（选择器）{
const date=新日期（）；
date.setTime（date.getTime（）-3600*1000*24）；
选择器。$emit（'拾取'，日期）；
}
}, {
文字：“一周前”，
onClick（选择器）{
const date=新日期（）；
date.setTime（date.getTime（）-3600*1000*24*7）；
选择器。$emit（'拾取'，日期）；
}
}]
},
值1:“”，
};
},
模板：`
`
})

我遇到了一个问题-更新value1变量中的数据应该需要对我的主应用程序（app.my_date）变量中的数据进行反应式更新，并且组件只能看到自身内部的变量（我无法立即将目标变量绑定到v-model）我不知道如何引用组件中变量的内容

---

请帮助我，以某种方式从value1获取数据…

有一些方法可以完全满足您的要求--例如，通过添加一个计算属性或监视程序来侦听value1的更改，并发出一个您的父组件可以侦听的事件——但我认为您在这里注意到的是，d-picker组件实际上不需要任何内部数据。相反，它应该只是从上面接收一个道具，并提供一种通过用户输入更改道具的方法，这正是

v-model

指令可以使用的

首先，让我们重新构造组件，使其不包含任何

数据

，只使用道具和事件。下面是一个简化版本，它使用

input type=date

而不是自定义日期选择器组件，但其思想是相同的：

Vue.component（'d-picker'{
道具：[“价值”]，
模板：`
`
})

请注意value prop是如何直接向下传递的，我们正在监听

输入

事件。我们相信输入将发出，在您的情况下，el日期选择器将发出。由于el日期选择器使用的是v-model，正如您将看到的，v-model仅在发出

输入

事件时才起作用，因此我们可以假设我们是好的。如果事件的负载与

{target:{value:{blah}}}

不匹配，则可能需要更改事件处理代码段

因此，当组件渲染时，它使用传递给它的道具。当用户选择一个日期时，它会发出一个事件，告诉其父对象该值应该更改。因此，我们的父组件需要监听它并做出相应的响应。我们可以这样做：

Vue.component（'app'{
数据（）{
返回{my_other_字段：“”
},
模板：`
日期选择器的值为：{my_other_field}

`
})

这很好，但我们在这里所做的非常普遍，因此Vue在

v-model

指令中有一种更快的方法也就不足为奇了

v-model

基于以下默认假设工作：a）属性名称为“值”，b）更改时发出的事件为

input

（从Vue 2.2+，仅供参考，这些假设可以更改）。因此，我们可以将上述代码重写为：

Vue.component（'app'{
数据（）{
返回{my_other_字段：“”
},
模板：`
日期选择器的值为：{my_other_field}

`
})

---

希望有帮助。下面是一个JSFIDLE，上面演示了代码：

不完全确定您的目标是什么。您正在尝试将数据发送到父组件还是根组件？或者这不是问题的根源。在我的vue应用程序“app”中添加变量“my_date”无效。。。我想，这是因为我的tamplate不是简单的日期选择器，而是那个库中的日期选择器。我认为，它有一些特殊性@Каааааааааааааааааааааа-看起来元素的日期选择器发出。这里是一个小提琴与相同的组成部分工作：