vue的组件 components

一、组件组成 

组成：html +Js+css

模板:

<template>
    <div >  
    </div>
</template>
<script>
export default {
    data(){}

}
</script>
<style>

</style>

二、注册组件 

1、注册全局组件

//先引入组件
import  组件名 from '绝对路径'
//全局注册组件
Vue.component("组件名"，{
     template：html ,
     data(){},
     methods:{}

}

//在根组件中调用即可

2、注册局部组件

//先引入组件
import  组件名  from  '绝对路径'

//注册局部组件  直接在js中注册

  export default{
      components:{组件名}|
      data(){},
    }
 
//在根组件中调用即可

 三、父子组件之间的传值

1、父组件想子组件传值

在子组件中使用props 方法接收父组件的数值

export default {
      props:["mytitle"],
    data(){
       return{

        }
         
    },
//在子组件就可以直接使用了

2、子组件想父组件传值

子组件发射自定义事件  this.$emit("自定义事件类型"，参数1，参数2)  父组件进行接收

 methods:{
      buquan(){
        this.$emit("shz",{
          name:'三国',
            author:'吴承恩',
            info:'四个男人西天取经的故事'
        })
      }

 父组件接收

<template>
  <div id="app" >
   Head  @shz="allBook" :mytitle="name"/> 
  </div> 
</template>