Question

我有一个数据输入页面，在输入某些数据时需要执行各种操作。目前，为了操纵数据，我将数据发送回服务器并刷新屏幕。该应用程序在内部网络上用于生产管理目的 - 因此没有问题为js库等重新加载时间或文件大小。我以为我会尝试使用javascript来完成所有这些而无需重新加载，这导致考虑角度，反应和其他类似的框架/库。首先，几乎所有的演示介绍都显示数据输入一个元素并立即在另一个元素中更新。这在这里不是特别有用，因为只更新完整的数据（这样的过程在哪里有用！）。我查看了检查键击然后接受输入键上的数据或离开元素的焦点并使用转义键将数据返回到其初始状态。如果数据被接受，则需要启动各种不同的过程。一个似乎“容易”学习并可能有所帮助的框架是Vue.js. 在下面的示例中，我为数据输入块（标签和入口元素）创建了一个组件，其中包含传递参数和适当时更新的想法 - 但我不知道如何实现它。我的Vue实例附加到div，我的组件是一个全局组件。 div里面我有

        <ms-pages></ms-pages>

我的组件是：

  Vue.component('ms-pages', {
template: '<div class="form-group row">' +
            '<label class="col-xs-4 col-form-label">Pages</label>' +
            '<div class="col-xs-8">' +
              '<input v-model="mspages" class="form-control" type="text">' +
            '</div>' + 
           '</div>',
 })

v-model抛出错误，虽然我在Vue实例中定义了mspages，但我也尝试在组件中定义它。然后我尝试在Vue实例中定义组件，但无法找到如何执行此操作。一种想法是组件可以保存输入数据的当前状态，但这似乎没有意义，因为数据在enter元素中。引导我思考这种方法可能是错误的。

我的javascript知识不是很好但是我可以尝试编写自己的函数来听各种元素上的击键，但是代码可能会变得冗长而复杂。（我觉得在python中做这些东西要容易得多..）

非常感谢任何帮助。

Answer 1

Vue为MVVM，因此视图数据需要反映模型数据，但这并不意味着您需要在每次数据更新时触发更新，Vue只会为您保持所有内容的同步。解决此问题的常用方法是让父级将prop传递给组件，然后在某些事件发生时让组件$emit更新。以下是在按下回车键时如何使用组件更新值的示例：

<强>总线

var bus= new Vue(); // A Vue instance to emit events onto

组件模板：

<template id="my-input">
  <div>
    <input v-model="inputVal" v-on:keyup.enter="updateVal"/>
  </div>
</template>

<强>组件：

Vue.component('my-input', {
  template: '#my-input',
  data(){
    return {
      inputVal: ""
    }
  },
  props: ['initVal'],
  created(){
    this.inputVal = this.initVal
  },
  methods: {
    updateVal(){
      bus.$emit('updateVal', this.inputVal);
    }
  }
});

主要加价：

<div id="app">
  <my-input :init-val="myInput"></my-input>
  {{myInput}}
</div>

父Vue实例：

new Vue({
  el: '#app',
  data: {
    myInput: "foo"
  },
  created(){
    bus.$on('updateVal', (updatedVal) =>{
      this.myInput = updatedVal;
    });
  }
});

我意识到你是Vue的新手，所以我会打破正在发生的事情：

首先，我们有一个bus（只是一个空的Vue实例）我们$emit个事件发生并监听它们，请注意这一行：bus.$emit('updateVal', this.inputVal);

在这里，我们发布了一个名为＆＃39; updateVal＆＃39;在按下回车键的情况下在总线上并在我们的父母中监听它，使用：

bus.$on('updateVal', (updatedVal) =>{
  this.myInput = updatedVal;
});

如果您查看组件模板，可以看到我们使用v-on:keyup.enter="updateVal"在按下回车键时调用updateVal方法，这会发出事件。

您还应该注意到v-model仅保持组件输入同步，当我们想要进行实际更新时，我们会触发事件并更新我们的主变量。

这里唯一的另一件事是我们已经通过一个道具来组件来设置一个初始值。

这里是JSFiddle：https://jsfiddle.net/k7cvq0f0/

与Vue.js

1 个答案: