总结

1. 静态传值：调用的子组件直接写自定义属性title=“首页”，子组件props:[‘title’]
2. 动态传值：调用的子组件v-bind绑定自定义属性:list=‘lists’，子组件props:[‘list’]
   注：lists为父组件data中的任意类型数据

1、父组件向子组件传递静态值（死值）

定义一个公共组件tabbar

• 当在页面中使用公共组件时，title会不同，因此需要将title传递给公共组件
• 采用props接收父组件传递过来的值

props: ['title','rightText'],

父组件中引入公共组件，并通过自定义属性传递值

<tabbar title="首页" rightText="查看更多"></tabbar>

props中的值可以像data中的值一样使用

2、父组件向子组件动态传值（接口反的）

• 例如我们封装一个轮播图
• 这时候可以采用动态传递一个对象类数组
• 使用v-bind动态传值，使用props接收

定义一个公共组件test，props接收参数并使用

// 子组件直接接收一个数组post
props: ["post"]

// 页面使用
<template>
<div class="test">
<div class="aa" v-for="item in post" :key="item.id">
<p>-----------------------</p>
<p>id:{{item.id}}</p>
<p>title:{{item.title}}</p>
<p>name:{{item.name}}</p>
</div>
</div>
</template>

父组件接口请求数据，传递给子组件一个数组

// 接口请求数据，赋值给posts
data() {
return {
posts: [
{ id: 1, title: "哈哈", name: "qq" },
{ id: 2, title: "嘿嘿", name: "aa" },
{ id: 3, title: "呼呼", name: "cc" }
]
};
}

// 子组件传值，使用v-bind
<test :post="posts"></test>

页面效果