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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Tomhs3000/article/details/81703636

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