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/）。

Vue.js组件之间的分离和通信

2 个答案: