vue父组件向子组件传值

子组件

<template>
<div class="timeline" > 
    <div v-for=" data in chatData">
        <span>{{data.time}}</span>
    </div>

</div>
</template>

<script>
export default {
  name: "timeline",
  props: {
      chatData:{  //这个是从父组件接收过来的变量名
          type:Array,  // 变量类型
          required:true,
      }
  }, 

  data: function() {
    return {

    };
  },
  methods: {
    }
  }
};
</script>


<style>
.timeline{
    height: 10px;
    width: 20px;
    border: 1px red solid }
</style>

在父组件中引用

<msgvue v-bind:chatData = "chatData"></msgvue>

v-bind: 绑定要传的值，不用v-bind直接把值放到标签上

子组件接受的父组件的值分为——引用类型和普通类型两种，

普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）

引用类型：数组（Array）、对象（Object）

其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，

但是，引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改