一、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. 把需要传给子组件的值赋给该属性