vue父子组件传值
1.父向子
传递数据:
在父组件中把子组件当做标签引入,通过设置标签的属性传递数据,
在子组件用props
接受,将父组件的数据number
通过设置标签child
的number
属性传递给子组件,
子组件通过props
传递接受,接受后,在子组件内this.number
就是父组件的number
数据。
父组件代码如下(分步骤)
:
<template>
<div>
<!-- 4.将子组件当做标签引入,并赋要传的值 -->
<child :number="number"></child>
</div>
</template>
<script>
import child from '@/child' //1.在父组件中引入子组件
export default {
data() {
return {
number:1 //3.定义要传的值
}
},
comments:{
child //2.在父组件中注册子组件 (已在router > index.js 文件中注册过可忽略此步)
},
}
</script>
子组件代码如下(分步骤)
:
<template>
<div>
{{number}} //使用
</div>
</template>
<script>
export default {
props:{
number:Number //接收props传递的number,后面写数据类型,传的什么类型就写什么,首字母大写
}
}
</script>
2.子向父
传递数据:
子向父传值需要 父组件绑定一个事件,子组件通过$emit
调用这个事件把值传过去
子组件代码如下
:
<template>
<div>
<!-- 1.调用一个方法 -->
<div @click="toFather()">子向父传值</div>
</div>
</template>
<script>
export default {
methods: {
toFather(){
this.$emit('fromChild','123') //通过$emit调用父组件中定义绑定的方法
//括号里('是父组件绑定的事件名','要传的')
}
},
}
</script>
父组件代码如下(分步骤)
:
<template>
<div>
<!-- 1.给子组件标签绑定一个方法 触发这个方法后调用另一个处理传来的数据的方法 -->
<child @fromChild="fatherFUN(val)"></child>
</div>
</template>
<script>
import child from '@/child'
export default {
methods: {
//2.处理传来的数据的方法
fatherFUN(val){
console.log(val)
}
},
comments:{
child
},
}
</script>
3.兄弟
组件传递数据 eventBus
同级传或隔级传可以用eventBus
,自行百度吧,兄弟传值一般用不上