一、父传子
1、原理
父组件传值子组件,就是在子组件中设置props属性接受父组件传来的值。
props与data和methods平级,下面是props的写法:
props: {
toson: [String, Number],
},
2、步骤
第一步:在父组件的子组件中自定义一个属性
<template id="father">
<div>
<son toson="toSon"></son>
</div>
</template>
toson属性是我们自定义的属性,toson属性值是要父传子传递的参数
第二步:在字标签中在props内用空的字接受
props: {
toson: [String, Number],
},
[String, Number]是传参的类型(字符串类型和数字类型)
如此,这个自定义属性就可以在子组件中使用了,使用方法跟data中相同,用this.toson
二、子传父
1、原理
在父组件的子标签中设置自定义函数,在子组件中书写触发事件即可
2、步骤
在父组件的字标签中书写自定义函数
<template id="father">
<div>
<son @tofather="tofather($event,2)"></son>
</div>
</template>
$event为事件函数
父组件自定义事件中有一个参数data,用来接收子组件的传值
methods: {
tofather(data, data2) {
console.log(data)
console.log(data2)
},
},
参数的名字可以自己命名
在子组件中写触发事件
toFather() {
this.$emit('tofather', '啦啦啦啦啦', '哈哈哈哈哈')
},
$emit(‘事件名字’,‘传的值’)