Question

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

我正在努力将遗留应用程序尽可能顺利地和不引人注目地迁移到vue。

我已经开始使用一个简单的组件而没有任何其他子组件。顺便说一句，我正在使用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实例的数据对象，这又可以将它传递给您的单页组件。

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项目。

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

1 个答案: