第三讲 组件传参

一、父传子 (自定义属性 props)

父组件向子组件传参，通过自定义属性的方式进行传参，在子组件中使用prop定义自定义的属性，然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上，那在子组件中props里面的自定义属性可以直接使用。

原理：父控制子，通过子组件的props属性，抛出子组件自定义标签属性，来接收父组件的操作状态

//父组件代码   渲染子组件
<Son  :sonName="uname" />

 // 子组件代码，接受父参数
export default {
  props: {
     sonName: String
  }
}

二、子传父 (自定义事件 this.$emit)

子组件向父组件传数据使用自定义事件， vue 组件提供了一个emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。

原理：子控制父，子组件绑定自定义事件，来处理父组件的方法函数，通过.$emit(‘自定义事件’,[参数])来触发属于自己的自定义事件

// 父组件代码，渲染子组件
<Son   @pass-value="valueFn" />
export default{
  method:{
    valueFn(value) {}
  }
}
// 子组件代码
this.$emit('pass-value', this.say)

 三、效果图

<template>
	<button class="active" 
	@click="counter++;
	$emit('counterchange',counter)">
		{{counter}}
	</button>
</template>

<script>
	// $emit(事件名,事件值)
	export default {
		// props接受父app.vue传参 num
		// props:["num"],
		props: {
			// 定义传递过来的参数是数字列席,默认值是1
			"num": {type: Number,default: 1},
			// "arr":{type:Array,default:1}
			//Number数字,String字符串,Boolen布尔值-值类型
			// Array数组, object对象-引用类型
			//·引用的默认值使用函数返回值default(){return:[]}

		},
		data() {
			// 使用num:把传过来的num赋值给counter
			return {
				counter: this.num
			}
		}
	}
</script>

<style scoped="spoced">
	/* 样式隔离:在scoped中的样式只在本组件有用 */
	.active {
		color: #f70;
		font-weight: 900;
	}
</style>

 

<template>
	<div>
		<h1 class="active">你好vue</h1>
		<!-- 3.使用组件 -->
		<CounterCom :num="m" @counterchange="m=$event"></CounterCom>
		<counter-com :num="c" @counterchange="c=$event"></counter-com>
		<counter-com @counterchange="n=$event"></counter-com>
		<hr>
		<p>{{n}}元钱</p>
		<p>我有{{m}}个男朋友</p>
		<p>今年有{{c}}个好朋友</p>
	</div>
</template>

<script type="text/javascript">
	// @counterchange监听子组件触发的事件
	// $event固定写法:事件的值
	//·用counterchange事件的值去更新n
	// 1.导入 CounterCom 组件
	import CounterCom from './components/CounterCom.vue'
	export default {
		// 2.注册 CounterCom 
		components: {
			CounterCom
		},
		data() {
			return {
				msg: 'vue-脚手架写大项目',
				n: 1, //父组件定义值n
				m:5,
				c:4,
			}
		}
	}
	// import导入,from从Components组件
</script>
<style>
	.green {
		background-color: green;
		color: #fff;
	}
</style>

效果图1：

效果图2：