vue组件传值props的使用

总结

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

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

定义一个公共组件tabbar

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

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

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

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

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

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

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

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

// 页面使用

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

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

// 子组件传值，使用v-bind

页面效果