子组件
<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)
其中,普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,
但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改