vue.js 2从传统前端迁移到单文件组件

Question

所以，好吧，我会得到大量的反对票，但由于我还没有找到任何有用的答案，我认为值得一试。

我正在尝试将遗留应用程序迁移到vue js上，尽可能的流畅和无阻碍。

我从一个简单的组件开始，没有更多的子组件。顺便说一句，我是和webpack一起建的。所以，我们开始吧。这是一个简单的CRUD形式。

没有vue父上下文，因为这将是这个遗留应用程序中的第一个vue组件。我已经走了这么远了：

import SinglePageVue from './single-page.vue';

// creating vue component
Vue.component('single-page-comp', SinglePageVue);

// invoke view by calling container
vue = new Vue({ el: '#component-container' });

// *** At this point I'd like to assign the data to the component
// somwhat like. Of course, this doesn't work, but this is what
// I'd like to do
vue.props.givenName = 'John'
vue.props.familyName = 'Doe'

还有一个提交事件，一旦表单提交，调用函数就需要响应该事件。

// in the script section this would look like

module.exports = {
  data: function() {
    return {
      onSubmit: function () {
        // assignable by function
      }
    }
  }
};

}；

我该怎么做？

Answer 1

如果你想在Vue中更新组件的数据，有很多方法可以做到这一点，但在这种情况下，我可能建议只创建一个传递给Vue实例的数据对象，Vue实例也可以将其传递给你的单页面组件。

​

console.clear()

const SinglePageVue = {
  props:["sharedData"],
  template:`
    <div>
      <h1>{{sharedData.message}}</h1>
    </div>
  `
}
Vue.component("single-page-vue", SinglePageVue)

const sharedData = {
  message: "I'm shared data"
}

new Vue({
  el:"#app",
  data:{
    sharedData
  }
})

setTimeout(() => sharedData.message = "I was updated", 1000)

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <single-page-vue :shared-data="sharedData"></single-page-vue>
</div>

​

在这里，sharedData是页面范围内的一个对象，您拥有的任何遗留代码都可以对其进行修改。因为sharedData是作为Vue的数据属性公开的，所以它现在是响应式的，对其属性的更改将反映在使用它们的任何地方。

这基本上是一个超级基本的状态管理解决方案。如果你最终需要更多，你可能会想要研究Vuex，但我已经用这种方法构建了几个Vue项目。