05自定义组件的编写调用

先引入再注册,即可以使用自定义组件

<template lang="html">
  <div id="app">
    <header></header>
    <div class="tab">
      I am tab//导航区块
    </div>
    <div class="content">
      I am content//内容区块
    </div>
  </div>

</template>

<script type="text/ecmascript-6">
import header from './components/header.vue';//先引入
export default {
  components: {//在注册
    //header:herder
    header //es6支持对象的简写
  }
}
</script>

<style lang="stylus" rel='stylesheet/stylus'>
</style>

header 组件

<template lang="html">

    <div class="header">
      I am header//头区块
    </div>

  </div>

</template>

<script type="text/ecmascript-6">
export default {

}
</script>

<style lang="stylus" rel='stylesheet/stylus'>
</style>

然而此时还会报错，原因是用了html5中的关键字header，改为v-header就ok了

<template lang="html">
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      I am tab//导航区块
    </div>
    <div class="content">
      I am content//内容区块
    </div>
  </div>

</template>

<script type="text/ecmascript-6">
import header from './components/header.vue';//先引入
export default {
  components: {//在注册
    //header:herder
    'v-header':header 
 }
}
</script>

<style lang="stylus" rel='stylesheet/stylus'>
</style>

总结：自定义组件最好以v-开头，这样既容易区分，又不会报错！

转载于:https://www.cnblogs.com/xiongwei2017/p/6643473.html