Vuejs组件间的分离和通信

Question

我做了一个小的vuejs应用程序，我对组件的工作原理有点困惑。

这是我到目前为止的代码：

<div id="app">
  <div v-if="loggedIn">
      <nav>
        <router-link to="/a">go to a</router-link>
        <router-link to="/b">go to b</router-link>
      </nav>

      <router-view></router-view>
  </div>

  <div v-else>
    <form v-on:submit.prevent="login" action="">
       <label>
         <input type="text" v-model="name" placeholder="Login" />
       </label>                   

       <label>        
         <input type="password" placeholder="Password" v-model="password" />                    
       </label>         

       <button type="submit">Login</button>        
    </form>
  </div>

</div>

JS：

const A = { template: '<div>A</div>' }
const B = { template: '<div>B</div>' }

const routes = [
  { path: '/a', component: A },
  { path: '/b', component: B }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

const app = new Vue({
  router,
  data : { 
    loggedIn : false,
    name: '',
    password: ''
  },

  methods: {

    login: function(){
      this.loggedIn = true;
    }

  }

}).$mount('#app')

http://jsfiddle.net/cbq6tmje/

注意，登录框只是索引文件中的一些html，但常识告诉我，它应该是一个单独的组件。

问题是，如果我让它成为一个组件，我就无法从主应用程序中共享或调用函数。比如login()方法。我该怎么做呢？

Answer 1

您不必使登录框成为一个组件。如果你打算在你的应用中重用一个html元素，也就是一个模式，那么我会考虑把它变成一个组件。如果您计划重用方法，则必须将它们转换为mixin - https://vuejs.org/v2/guide/mixins.html。然后，您可以扩展mixin以在您需要它的任何组件中使用。

Answer 2

实现这一点的最简单方法是使用localStorage。然而，最好的方法是使用vuex (https://vuex.vuejs.org/)，这是一种状态管理。