组件之间的引用以及跳转

引用跳转的意思就是说我们定义了一个home的组件，这个组件要引用另外一个组件的东西该如何引用？
首先定一个主组件

//主组件
//引用子组件中的内容
<template>
  <div class="hello">
       <div class="home"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
	width: 400px;
	height: 400px;
	background-color: #0000FF;
}
.home{
	position: absolute;
	left: 100px;
	top: 100px;
	width: 200px;
	height: 300px;
	background-color: #002451;
}
</style>

然后写一个要引用的子组件

<template>
	<div class="childer"></div>
</template>

<script>
</script>

<style scoped>
.childer{
	position: absolute;
	left: 200px;
	top: 100px;
	width: 200px;
	height: 300px;
	background-color: red;
	}
</style>

这个子组件就是我们要引用的的了
那么如何使用呐，怎样我们才能将红色引进过来？
三步走：引入——>注册——>使用（所有的引用都是如此）

在这里插入代码片

//三步走就可以将组件引入过来
<template>
	<div class="hello">
		<div class="home"></div>
		<!-- 第三部，使用 -->
		<Children />
	</div>
</template>

<script>
	// 第一步引入
	import Children from "./Children.vue";
	export default {
		name: 'HelloWorld',
		props: {
		},
		// 第二步注册
		components: {
			Children,
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hello {
		width: 400px;
		height: 400px;
		background-color: #0000FF;
	}
	.home {
		position: absolute;
		left: 100px;
		top: 100px;
		width: 200px;
		height: 300px;
		background-color: #002451;
	}
</style>

那么引入进来了我还想让组件实现一个这样的功能，就是我点击红色组件的时候红色组件消失，黑色组件出现，反之亦然
这个操作如何实现呢？
首先让组件内只出现一个颜色我们使用v-if来判断如果值是真的就显示，如果值是假的就不显示

<template>
	<div class="hello">
		<div class="home" v-if="homeShow"></div>
		<!-- 第三部，使用 -->
		<Children v-if="childShow"/>
	</div>
</template>

<script>
	// 第一步引入
	import Children from "./Children.vue";
	export default {
		name: 'HelloWorld',
		props: {
		},
		// 第二步注册
		components: {
			Children,
		},
		data(){
			return{
				homeShow: true,
				childShow: false,
			}
		}
		
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hello {
		width: 400px;
		height: 400px;
		background-color: #0000FF;
	}
	.home {
		position: absolute;
		left: 100px;
		top: 100px;
		width: 200px;
		height: 300px;
		background-color: #002451;
	}
</style>

然后我们开始实现我们的功能，我们使用click="$emit(‘name’)"的方式来做
首先实现点击黑色出现红色，这个很简单，给黑色框一个点击事件让他们的v-if取反即可

<template>
	<div class="hello">
		<div class="home" v-if="homeShow" @click="show"></div>
		<!-- 第三部，使用 -->
		<Children v-if="childShow"/>
	</div>
</template>

<script>
	// 第一步引入
	import Children from "./Children.vue";
	export default {
		name: 'HelloWorld',
		props: {
		},
		// 第二步注册
		components: {
			Children,
		},
		data(){
			return{
				homeShow: true,
				childShow: false,
			}
		},
		methods: {
			show(){
				this.homeShow = !this.homeShow;
				this.childShow = !this.childShow;
			},
			
		}
		
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hello {
		width: 400px;
		height: 400px;
		background-color: #0000FF;
	}
	.home {
		position: absolute;
		left: 100px;
		top: 100px;
		width: 200px;
		height: 300px;
		background-color: #002451;
	}
</style>

然后我们实现点击红色的时候让红色消失首先先给红色的click写一个点击事件@click="$emit(‘clickeChild’)

//在子组件中定义一个点击事件name=clickeChild
<template>
	<div class="childer" @click="$emit('clickeChild')"></div>
</template>

<script>
	
</script>

<style scoped>
.childer{
	position: absolute;
	left: 200px;
	top: 100px;
	width: 200px;
	height: 300px;
	background-color: red;
	}
</style>

然后我们在主组件中写一下让他们进行交换

<template>
	<div class="hello">
		<div class="home" v-if="homeShow" @click="show"></div>
		<!-- 第三部，使用 -->
		<Children v-if="childShow" @clickeChild="clickeChild"/>
	</div>
</template>

<script>
	// 第一步引入
	import Children from "./Children.vue";
	export default {
		name: 'HelloWorld',
		props: {
		},
		// 第二步注册
		components: {
			Children,
		},
		data(){
			return{
				homeShow: true,
				childShow: false,
			}
		},
		methods: {
			show(){
				this.homeShow = !this.homeShow;
				this.childShow = !this.childShow;
			},
			clickeChild(){
			this.homeShow = !this.homeShow;
			this.childShow = !this.childShow;
			}
		}
		
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hello {
		width: 400px;
		height: 400px;
		background-color: #0000FF;
	}
	.home {
		position: absolute;
		left: 100px;
		top: 100px;
		width: 200px;
		height: 300px;
		background-color: #002451;
	}
</style>

这样就完成了！！！