如何使用组件区域显示各种内容?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (60)

我有一个左侧用户列表和一个右侧用于显示用户信息的面板。关于用户的信息有一个编辑按钮,我想要接管右侧面板,然后保存将返回到用户详细信息。这两页应该是不同的组件,还是应该使用javascript来显示和隐藏内容?那么这两种方法是否有更好的方法?

提问于
用户回答回答于

你的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]
}
用户回答回答于

例子:

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>

扫码关注云+社区

领取腾讯云代金券