blocks|key|4311312|text|我为你写了一个简单的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4311313|​|4311314|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()
++}
})|code-block|syntax|javascript|4311315|*{
++++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;
++}|4311316|<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>|4311317|4311318|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I wrote a simple example for you:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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(_=&gt;{
        this.user = data.filter(o=&gt;o.id==this.userId)[0]
      },10)
    }    
  },
  created () {
    this.loadUser()
  },
  watch: {
    userId (newVal) {
      if(newVal){
        this.loadUser()
      }
    }
  }
}

Vue.component('user-viewer',{
  template: `&lt;div&gt;
    name:{{user.name}}&lt;br&gt;
    age: {{user.age}}&lt;br&gt;
    &lt;button @click="edit"&gt;edit&lt;/button&gt;
  &lt;/div&gt;`,
  mixins: [mixin],
  methods: {
    edit () {
      this.$emit('switch-edit-mode',true)
    }
  }
});

Vue.component('user-editor',{
  template: `&lt;div&gt;
    name:&lt;input type="text" v-model="user.name"&gt;&lt;br&gt;
    age: &lt;input type="text" v-model="user.age"&gt;&lt;br&gt;
    &lt;button @click="sendData"&gt;save&lt;/button&gt;
  &lt;/div&gt;`,
  mixins: [mixin],
  methods: {
    sendData () {
      /*ajax send user data here*/
      setTimeout(_=&gt;{
        /*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=&gt;({
        id: o.id,
        name: o.name
      }))
    }
  },
  created () {
    this.fetchUsers()
  }
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    padding:0;
    margin:0;
  }
  ul,li{
    list-style:none;
  }
  .main{
    display: flex;
  }
  .user-list{
    width: 250px;
  }
  .user-list&gt;li{
    border:1px solid skyblue;
    border-bottom: none;
  }
  .user-list&gt;li:last-child{
    border-bottom:1px solid skyblue;
  }
  .content-wrapper{
    flex:1;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"&gt;&lt;/script&gt;
&lt;style&gt;
  *{
    padding:0;
    margin:0;
  }
  ul,li{
    list-style:none;
  }
  .main{
    display: flex;
  }
  .user-list{
    width: 250px;
  }
  .user-list&gt;li{
    border:1px solid skyblue;
    border-bottom: none;
  }
  .user-list&gt;li:last-child{
    border-bottom:1px solid skyblue;
  }
  .content-wrapper{
    flex:1;
  }
&lt;/style&gt;
&lt;div id="app"&gt;
  &lt;div class="main"&gt;
    &lt;ul class="user-list"&gt;
      &lt;li v-for="user in users" @click="userId=user.id"&gt;{{user.name}}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="content-wrapper"&gt;
      &lt;component v-if="userId" :is="isModify?'user-editor':'user-viewer'" @switch-edit-mode="toggleModify" :user-id="userId"&gt;&lt;/component&gt;
      &lt;div v-else&gt;please choose a user to view or edit&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4311345|text|你的混合文件：(mixin.js)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4311346|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()
++++++}
++++}
++}
}|code-block|syntax|javascript|4311347|用法：|4311348|import+mixin+from+'mixin.js'
export+default{
++...
++mixins:+[mixin]
}|4311349|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>your mixin file:(mixin.js)</p>

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

<p>usage: </p>

<pre><code>import mixin from 'mixin.js'
export default{
  ...
  mixins: [mixin]
}
</code></pre>


<p>I have a relatively simple task although I am just a beginner so it's difficult to proceed.
I have a list of users on the left and a right panel to show that users info. The information about the user has an edit button that I want to take over that right panel and then save will return back to the user details.
What is the best approach to go about this?
Should the 2 pages be different components or should I just use javascript to show and hide content? Is there a better approach then either of those?
Sorry I'm new and just trying to get my had around the concept.</p>

<p>Thanks<a href="https://i.stack.imgur.com/9y2bv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9y2bv.png" alt="enter image description here"></a></p>


Using component area to show various content

我有一个相对简单的任务，虽然我只是一个初学者，所以很难继续下去。我在左边有一个用户列表，右边有一个面板来显示用户的信息。关于用户的信息有一个编辑按钮，我想要接管该右面板，然后保存将返回到用户详细信息。做这件事最好的方法是什么？这两个页面应该是不同的组件，还是我应该只使用javascript来显示和隐藏内容？有没有比这两...

问使用组件区域显示各种内容
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用组件区域显示各种内容EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用组件区域显示各种内容
EN