vue组件以及组件之间的通信

组件使用(局部)

• 定义一个子组件

<template>
	<div>这是left组件</div>
</template>

<script>
</script>

<style>
</style>

• 在父组件中使用的步骤
• @符号指向的是项目目录中的src目录

<template>
  <div>
	  <div class="box">
	  	// 第三步 通过标签使用组件
		  <Left></Left>
	  </div>
  </div>
</template>

<script>
// 第一步导入组件
import Left from "@/components/Left.vue"
export default{
	// 第二步 注册组件
	components:{
		Left
	},
	data() {
		return {
		}
	}
}
</script>

<style>
	
</style>

组件使用(全局)

• 子组件

<template>
	<div>
		<h5>Count组件</h5>
	</div>
</template>

<script>
</script>

<style>
</style>

• main.js

import Count from '@/components/Count.vue'
Vue.component('MyCount',Count)

Props自定义属性

• 极大提高组件的复用性
• props里面的属性可以直接在页面使用
• 子组件定义一个props

<<template>
  <div>
	<h5>Count组件</h5>
	<p>count的值是：{{count}}</p>
	<button @click="add()">+1</button>
 </div>
</template>

<script>
export default {
	props:['init'],
	data() {
		return {
			count:0
		}
	},
	methods:{
		add(){
			this.count += 1
		}
	}
}
</script>

• 父组件引用并传入props的自定义属性

<template>
	<div>
		<div>这是left组件</div>
		<MyCount init="9"></MyCount>
	</div>
	
</template>

props只读，不能被修改

• 如果要修改props的值，直接转存到组件中的属性中去

<script>
export default {
	props:['init'],
	data() {
		return {
			count:this.init,
		}
	},
	methods:{
		add(){
			this.count += 1
		}
	}
}
</script>

props属性设置默认值default

• default 设置默认值
• type 设置默认的数据类型
• required 是否必填项 设置的默认值不被认可

props:{
	init:{
		default : 0,
		type : Number,
		required : true
	}
},

组件之间的样式冲突

• 默认情况下写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题

• left组件

<template>
	<div>
		<h3>这是left组件</h3>
		<MyCount :init="7"></MyCount>
	</div>
	
</template>

<script>
</script>

<style>
h3{
	color: red;
}
</style>

• right组件

<template>
	<div>
		<h3>这是right组件</h3>
		<MyCount :init="3"></MyCount>
	</div>
</template>

<script>
</script>

<style>
</style>

解决样式冲突scoped

• 在style标签上加一个scoped属性，vue在底层自动为每一个标签生成一个单独的data-v-xxx属性

<style scoped>
	h3{
		color: red;
	}
</style>

样式穿透 /deep/

• 加了/deep/ 之后相当于是 [data-v-xxx] h5 不加就是 h5 [data-v-xxx]
• 适用于希望在父组件中直接修改子组件的样式可以使用这个方法（使用第三方组件库的时候修改默认样式的时候）
• 一般在父组件中去使用审查子组件里面的元素

<style>
/deep/ h5{
	color: pink;
}
</style>

组件之前的数据共享关系

• 最常见的关系

  父子
  兄弟

父子之间的数据共享

父向子

• props是只读属性不能修改
• 子组件定义属性

<template>
	<div>
		<h3>这是left组件</h3>
		<p>msg的值 {{msg}}</p>
		<p>user的值 {{user}}</p>
	</div>
	
</template>

<script>
	export default{
		props:['msg','user']
	}
</script>

<style>
</style>

• 父组件传入

<template>
  <div>
	<Left :msg="message" :user="user"></Left>
  </div>
</template> 

<script>
import Left from "@/components/Left.vue"
export default{
	components:{
		Left
	},
	data(){
		return{
			message: 'hello 孙少聪！',
			user: {
				name: 'ssc',
				age: 18
			}
		}
	}
}
</script>

<style>
</style>

子向父

• 子组件向父组件传值需要使用自定义事件

<template>
	<div>
		<h3>这是right组件</h3>
		<p>这是count值 --- {{count}}</p>
		<button @click="add()">add</button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				count: 0,
			}
		},
		methods: {
			add(){
				this.count += 1
				// this.$emit('自定义事件名字',要传递的值)
				this.$emit('numChange',this.count)
			}
		}
	}
</script>

<style>
</style>

• 父组件接收

<template>
  <div>
	<div>
		<Right @numChange="getCount"></Right>
		<p>传过来的值 {{countFrom}}</p>
	</div>
  </div>
  
 
</template> 

<script>
import Right from "@/components/Right.vue"
export default{
	components:{
		Right 
	},
	data(){
		return{
			countFrom: 0
		}
	},
	methods: {
		getCount(val) {
			this.countFrom = val
		}
	}
}
</script>

<style>
</style>

兄弟组件之间

• 在vue2.x中，兄弟组件之间的数据共享方案是EventBus

• 发送方子组件 导入bus 通过emit来发送数据bus.$emit('share',this.str)

<template>
	<div>
		<h3>这是left组件</h3>
		<button @click="send">组件之间发送数据</button>
	</div>
	
</template>

<script>
	import bus from './bus/eventBus.js'
	export default{
		data() {
			return{
				str:'黑云压城城欲摧'
			}
		},
		methods: {
			send() {
				bus.$emit('share',this.str)
			}
		}
	}
</script>

<style>
</style>

• eventBus.js导出一个vue实例

import Vue from 'vue'

export default new Vue()

• 接收方在created 中通过 bus.$on接收

<template>
	<div>
		<h3>这是right组件</h3>
		<p>这是bus传过来的值 --- {{msgFromLeft}}</p>
	</div>
</template>

<script>
	import bus from './bus/eventBus.js'
	export default{
		data(){
			return{
				msgFromLeft:''
			}
		},
		created() {
			bus.$on('share', val=>{
				this.msgFromLeft = val
				console.log(val);
			})
		}
	}
</script>

<style>
</style>