一、组件组成
组成: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>