vue的组件创建，组件注册

vue的组件创建，组件注册

效果图

其中header是公用组件

 

步骤：

1：创建compotents文件夹，里面放我们要用的各个组件模块

 

2：首先编写公共组件Header.vue这个组件，我们以他为范本

<template>
    <!-- 挂载的组件 -->
    <div id="three">
        <h2>{{msg}}</h2>
    </div>
</template>

<script>
//将这个组件暴漏出去
export default{
    name:'three',
    data(){
        return{
            msg:'这是header组件!...'
        } 
    },
}
</script>

<style lang="scss" scoped> //要加这个scoped保持每个组件的样式单一性，不然可能会被其它组件同化
h2{
color:blue;
}
</style>

这个Header基本就创建完成了

3：我们在New.vue里面引入这个Header.vue组件

<template>    
    <div id="two">
            <h2>{{msg}}</h2>
            <v-header></v-header>  /*这个标签是我们下面给他的自定义名字*/
            <hr>
    </div>
</template>

<script>
import Header from "./Header"  //通过import关键字将Header组件引入名字可以自定义但是路径要对

export default {
    name:'two',
    data(){
        return{
            msg:'这是New',
        }
    },
    //通过这个标签将Header写入到页面上 这个里面的Header要和我们用import引入时起的名字一样
    components:{
        'v-header':Header
    },
}
</script>

<style lang="scss">
p{
    color:green;
}
</style>

4：这样其实就好了，以我为例，我是在App.vue里面运行的 因为这个New组件引入了Header组件，所以我只需要把这个New组件引入到App.vue里面就好了，同理:

<template>
<div id="app">
    {{msg}}
    <div class="styclass">
       <v-new></v-new>
    </div>  
</div>
</template>

<script>
import New from "./components/New.vue"
//1:引入组件 2:挂载组件 3:在模板中使用
export default {
  name: 'app',
  data () {
    return{
      msg:'组件模块'
    }
  },
  components:{
     'v-new':New,  
  }
}
</script>

<style lang="scss" scoped>
//scoped 局部美化
.styclass{
  padding: 10px;
  border:1px solid gray;
  margin-top: 1%;
}
</style>

这样就好了..有问题请留言