1.1什么是组件
.html 中有组件，是一段可以被复用的结构代码
.Css中有组件，是一段可以被复用的样式
.Js中有组件，是一段可以被复用的功能
.Vue中也有组件，指的就是一个模板，是一个独立的，完整的（包含html,css.js等），可以直接拿来用
2.2 组件特性
.组件的实例化对象，跟vue实例化对象一样，因此，我们也可以将vue实例化对象看出组件
.组件间是是独立的，因此数据要独立存储，方法要独立定义，彼此间不能共享
定义一个子组件
<template>
<div>
<h2>{{xxx}}</h2>
<h1 style="color:yellow">我是子组件</h1>
<button @click="childfund">点击</button>
</div>
</template>
<script>
export default {
name:'Child',
//子组件要使用父组件的数据，只需要一步，在props中接受父组件的属性
props:['xxx'], //接受父组件给子组件定义的属性
methods:{
childfund(){
//子组件调用父组件方法，并传值
//$emit 触发当前实例上的事件，也可以简单的理解为触发父组件上的事件（向上冒泡）
this.$emit('funcname','数据')
}
}
}
</script>
定义一个父组件
<template>
<div>
<p>{{msg}}</p>
<h1>我是父组件</h1>
// 第三步 把父组件的某一个属性传递给子组件
<child02
:xxx="msg"
@funcname="change"
></child02>
</div>
</template>
<script>
//第一步：在父组件中导入组件
import Child02 from '@/components/Child02'
export default {
name:'Father02',
// 第二步 ：父组件中注册子组件
components:{
Child02
},
data(){
return {
msg:"我是父组件的内容"
}
},
methods:{
change(data){
// data 是子组件中传递的数据
this.msg=data //更新父组件的内容
}
}
}
</script>