vue-class-component

vue-class-component

---

作用

用于将Vue中组件用类的方式编写。

Demo

1.先定义一个组件ComponentA：

 1 <template>
 2   <div>
 3     <h3>Simple header {{getText}}</h3>
 4   </div>
 5 </template>
 6 <script>
 7 import Vue from 'vue'
 8 import Component from 'vue-class-component'
 9 
10 @Component({
11   props: {
12     name: String
13   }
14 })
15 export default class SimpleHeader extends Vue {
16   // initial data
17   id = 'myId'
18 
19   // computed
20   get getText () {
21     return `${this.name}(${this.id})`
22   }
23 }
24 </script>
25 <style>
26 </style>

2. 在App.vue中引用它

<template>
  <div>
    <div class="sc-width-full sc-height-full">
      <Layout>
        <SimpleHeader ref="headerMenu" name="david"></SimpleHeader>
        <div class="ivu-layout ivu-layout-has-sider" style="height:100%;">
          <Layout id="pageContainer">
            <div>
              <Content id="pageContent">
                <router-view></router-view>
              </Content>
            </div>
          </Layout>
        </div>
      </Layout>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import SimpleHeader from './simple-header.vue'

@Component({
  components: {
    SimpleHeader
  }
})
export default class Index extends Vue {
  userName = null;
  userRole = null;
  created () {
    this.getUserInfo()
  }
  getUserInfo () {
    // getUserInfo
  }
}
</script>
<style>
.ivu-layout {
  height: 100%;
}
.ivu-layout.ivu-layout-has-sider {
  display: block;
  height: calc(100% - var(--header-height));
  margin-left: 0.75rem;
  padding: 0.5rem 1.25rem;
}
</style>

效果：