vue中父子组件之间的通信（父组件向子组件传值）

本文主要是介绍vue中父子组件之间的通信（父组件向子组件传值），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、vuex作为状态管理，用起来还是蛮方便的，但是最近某个项目遇到个情况，有东西和vuex冲突了，很多传值的地方只能通过组件之间的通信来解决。下面简单记录下，父与子，子与父之间的一些传值方法。

二、父组件向子组件传值

<template><div><Child :time="year":xiaoming="person"></Child></div>
</template><script>
import Child from "~/components/Child.vue";
export default {layout: "default",components: {Child},data() {return {year   : '8102.',//  传给子组件的字符串person : {age:18,sex:'male',name:'xiaoming'},};},};
</script>

这里是父组件给子组件传了两个值，一个字符串，一个对象

<template><div><div>{{year}}</div><div>{{xiaoming.age}}</div></div>
</template><script>
export default {props: {year:String,xiaoming:Object,default(){return []}},data() {return {};},
};
</script><style lang="less" scoped>
</style>

这边是子组件从父组件中获取到传过来的值并且渲染到页面上。

总结一下有几点

1. 子组件在props中创建一个属性，用以接收父组件传过来的值

2. 父组件中注册子组件

3. 在子组件标签中添加子组件props中创建的属性

4. 把需要传给子组件的值赋给该属性

 

这篇关于vue中父子组件之间的通信（父组件向子组件传值）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---