<div id="box"><h2 @click="bool=true">猫</h2><h2 @click="bool=false">狗</h2><com-cat :cats = 'cat' v-show='bool==true'></com-cat><com-dog :dogs = 'dog' v-show='bool==false'></com-dog><!-- <div v-for="item in cat" v-show='bool==true'><img :src='item.img'/><span @click='title=item.title'>{{item.title}}</span></div> --><!-- <div v-show='bool==false' v-for="item in dog" ><img :src='item.img'/><span @click='title=item.title'>{{item.title}}</span></div> --><!-- //标题 --><h1>{{title}}</h1></div>

//猫的组件let ComCat = {template:`<div><div v-for="item in cats"><img :src='item.img'/><span @click='show(item.title)'>{{item.title}}</span></div></div>`,props:['cats'],methods:{show(title){this.$parent.show(title)}}}//狗的组件let ComDog={template:`<div><div v-for="item in dogs"><img :src='item.img'/><span @click='show(item.title)'>{{item.title}}</span></div></div>`,props:['dogs'],methods:{show(title){this.$parent.show(title)}}}new Vue({el: "#box",methods:{show(titele){this.title = titele;}},components:{ComCat,ComDog},data: {title:"未选中",bool:true,cat: [{img: '作业/imgs/cat1.jpg',title: 'cat1'}, {img: '作业/imgs/cat2.jpg',title: 'cat2'}],dog: [{img: '作业/imgs/dog1.jpg',title: 'dog1'}, {img: '作业/imgs/dog2.jpg',title: 'dog2'}]}})

1.局部注册：
        a.vue实例中注册的组件叫局部组件（组件私有只能在当前实例中使用）
        b.局部注册的data是一个函数，如果是对象得话，那么组件之间的数据会相互影响，而声明的函数会形成闭包域（return）
        ，数据之间会起到隔离数据的作用
    2.全局注册：
        a.在实例外注册的组件叫全局组件（可被其他实例使用）
        b.Vue.component（“自定义组件名”，组件对象）

1.父组件给子组件传值：props是专门用来接收父组件传递过来的值（数组，对象），接收的属性可以当做data数据进行使用

2.子组件给父组件传值：$emit()自定义事件（此事件由父组件来触发），参数1是自定义的事件名，参数2表示需要传的数据

3.插槽传值
        a.插槽<slot></slot>
        b.当父组件需要传递标签的时候可以使用插槽来传值，先把需要传递的父组件标签定义在自定义自建标签中，
        再到子组件模板中使用slot标签，如果父组件中有多个标签，则需要先给标签取类名，然后把要传递的名字
        写在模板slot中，就可以做到传递指定的标签

效果图如下：