使用组件区展示各种内容

Question

我有一个相对简单的任务，虽然我只是一个初学者，所以很难继续。 我在左侧和右侧面板上有一个用户列表，以显示用户信息。有关用户的信息有一个编辑按钮，我想接管该右侧面板，然后保存将返回到用户详细信息。 解决此问题的最佳方法是什么？ 这两个页面应该是不同的组件还是应该只使用 javascript 来显示和隐藏内容？有没有比这两种方法更好的方法？ 抱歉，我是新手，只是想了解一下这个概念。

谢谢

Answer 1

我为你写了一个简单的例子：

const data = [{
  id: 1,
  name: 'user1',
  age: 21
},{
  id: 2,
  name: 'user2',
  age: 33
}]

const mixin = {
  props: {
    userId: {
      required: true
    }
  },
  data () {
    return {
      user: {}
    }
  },
  methods: {
    loadUser () {
      /*ajax to get user detail data here*/
      setTimeout(_=>{
        this.user = data.filter(o=>o.id==this.userId)[0]
      },10)
    }    
  },
  created () {
    this.loadUser()
  },
  watch: {
    userId (newVal) {
      if(newVal){
        this.loadUser()
      }
    }
  }
}

Vue.component('user-viewer',{
  template: `<div>
    name:{{user.name}}<br>
    age: {{user.age}}<br>
    <button @click="edit">edit</button>
  </div>`,
  mixins: [mixin],
  methods: {
    edit () {
      this.$emit('switch-edit-mode',true)
    }
  }
});

Vue.component('user-editor',{
  template: `<div>
    name:<input type="text" v-model="user.name"><br>
    age: <input type="text" v-model="user.age"><br>
    <button @click="sendData">save</button>
  </div>`,
  mixins: [mixin],
  methods: {
    sendData () {
      /*ajax send user data here*/
      setTimeout(_=>{
        /*false means edit complete,so that user list must be reloaded*/
        this.$emit('switch-edit-mode',false);
      },10)
    }
  }
});

var app = new Vue({
  el: '#app',
  data () {
    return {
      users: [],
      isModify: false,
      userId: null
    }
  },
  methods: {
    toggleModify (modify) {
       this.isModify = modify
       if(!modify){
          this.fetchUsers();
       }
    },
    fetchUsers () {
      /*load your user list data here*/
      this.users = data.map(o=>({
        id: o.id,
        name: o.name
      }))
    }
  },
  created () {
    this.fetchUsers()
  }
})

*{
    padding:0;
    margin:0;
  }
  ul,li{
    list-style:none;
  }
  .main{
    display: flex;
  }
  .user-list{
    width: 250px;
  }
  .user-list>li{
    border:1px solid skyblue;
    border-bottom: none;
  }
  .user-list>li:last-child{
    border-bottom:1px solid skyblue;
  }
  .content-wrapper{
    flex:1;
  }

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
  *{
    padding:0;
    margin:0;
  }
  ul,li{
    list-style:none;
  }
  .main{
    display: flex;
  }
  .user-list{
    width: 250px;
  }
  .user-list>li{
    border:1px solid skyblue;
    border-bottom: none;
  }
  .user-list>li:last-child{
    border-bottom:1px solid skyblue;
  }
  .content-wrapper{
    flex:1;
  }
</style>
<div id="app">
  <div class="main">
    <ul class="user-list">
      <li v-for="user in users" @click="userId=user.id">{{user.name}}</li>
    </ul>
    <div class="content-wrapper">
      <component v-if="userId" :is="isModify?'user-editor':'user-viewer'" @switch-edit-mode="toggleModify" :user-id="userId"></component>
      <div v-else>please choose a user to view or edit</div>
    </div>
  </div>
</div>

Answer 2

你的 mixin 文件：(mixin.js)

export default{
  props: {
    userId: {
      required: true
    }
  },
  data () {
    return {
      user: {}
    }
  },
  methods: {
    loadUser () {
      /*ajax to get user detail data here*/
      setTimeout(_=>{
        this.user = data.filter(o=>o.id==this.userId)[0]
      },10)
    }    
  },
  created () {
    this.loadUser()
  },
  watch: {
    userId (newVal) {
      if(newVal){
        this.loadUser()
      }
    }
  }
}

用法：

import mixin from 'mixin.js'
export default{
  ...
  mixins: [mixin]
}