创建组件

在文件夹下(如components里)创建vue文件，写入代码模板如下

<template>
//这里写组件的模板
</template>

<script>
export default{
//这里声明组件的默认输出
}
</script>

<style scoped>
//这里写组件的样式
</style>

//之前学的所有的插值表达式绑定属性，绑定事件，循环列表等方法在template里面都可以使用
组件的模板，跟元素必须只有一个
组件里的data必须是函数

data(){
   return {
        testData:'我是一个测试数据'
      }
   }

引入组件的方法

1.引入自己书写的vue文件

import firstCom from"./components/FirstCom";//路径前加./表示根目录下

2.在父组件内的components里面声明组件

export default {
  name: 'App',
  components:{firstCom},
}

3.在父组件的模板内直接使用声明的组件,把组件渲染到页面中

<div id="app">
    <firstCom></firstCom>
</div>

自定义组件

自定义全局组件

Vue.component("zhead",{
template:'<div>{{testData}}</div>',
        data:function(){
            return {
                testData:"我是儿子"
            }
        },
    }

自定义局部组件

new Vue({
        el:"#app",
        data:{},
        //自定义局部组件
        components:{
            localcom:{
                template:'<div @click="onClick">{{localData}}</div>',
                data(){
                    return{
                        localData:"我是爸爸", 
                      }
                  }
              }
          })