父组件向子组件单向传递
- 父组件:引入子组件后,通过属性绑定的形式,将值传入子组件;
`
- 子组件:子组件通过props接收父组件传入的值;
`{{sonGetParam}}
子组件向父组件单向传递
- 父组件:引入子组件后,自定义一个用来处理自定义事件的方法,接收子组件传递的值;
`
- 子组件:子组件通过$emit触发自定义事件,将值传递给父组件;
`
父组件和子组件相互传递
- 通过自定义函数的方式
①. 父组件:
`
②. 子组件:
`
<button @click="handleChildEvent">触发事件
- 使用.sync进行双向绑定: 是“v-on:update:参数名”的简化写法
①. 父组件:
`
②. 子组件:使用$emit('update:param');
`
<button @click="handleChildEvent">触发事件
爷组件和孙组件隔代传递
- 适用于vue2.4.0版本以上:
①. 爷组件:定义处理值的自定义函数 和 接收孙组件传递过来的值的参数,同时将此值传递到孙组件;
`
②. 父组件:使用“$attrs.参数名”获取父组件中除了prop传递的属性、class、style的属性;“v-on='$listeners'”获取作用在这个组件上的所有监听器; {{param}}
<template> <div> <son :param="$attrs.param" v-on="$listeners"></father> </div> </template>
③. 孙组件:通过props获取父组件传递的值;$emit('方法名', 需要传递的参数) 来触发自定义函数并传递值;
`
<button @click="handleChildEvent">触发事件