使用组件来渲染图片切换

<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中，就可以做到传递指定的标签

效果图如下：