13-props组件传值--父向子传值

父组件向子组件传值props

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

[小案例：]

在同一个页面中，有两个样式相同内容不同的组件，为他们传递不同的值

之前在首页、列表页、关于我们都做了路由跳转，现在分别在这三个页面中引入同一个组件，为他们传递不同的值

先新建一个公共组件pubTitle，然后写一点样式

<template>
  <view class="pubTitle">
    <view class="big">文章的标题</view>
    <view class="small">文章的副标题</view>
    <view class="line"></view>
  </view>
</template>

<script>
  export default {
    name:"pubTitle",
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
.pubTitle {
  padding: 60rpx 30rpx;
  // 使文字居中
  text-align: center;
  .big{
    font-size: 50rpx;
    font-weight: 600;
    color: #333;
  }
  .small {
    font-size: 28rpx;
    color: #888;
  }
  .line {
    display: inline-block;
    width: 80rpx;
    height: 8rpx;
    background: #1aa034;
    border-radius: 10rpx;
  }
}
</style>

在首页使用这个组件，之前创建这个组件的时候，文件名是用的小驼峰写法，在引入的时候，可以改成短横线的写法，会自动识别

接下来，在list页面和about页面也引入这个组件

[props传值]

props是写在自定义组件中的属性，属性值是一个列表,列表中的值是字符串，这个字符串通过插值表达式写到标签中

<template>
  <view class="pubTitle">
    <view class="big">{{title}}</view>
    <view class="small">文章的副标题</view>
    <view class="line"></view>
  </view>
</template>

<script>
  export default {
    name:"pubTitle",
    props: ["title"],
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
.pubTitle {
  padding: 60rpx 30rpx;
  // 使文字居中
  text-align: center;
  background: #95E1D3;
  .big{
    font-size: 50rpx;
    font-weight: 600;
    color: #333;
  }
  .small {
    font-size: 28rpx;
    color: #888;
  }
  .line {
    display: inline-block;
    width: 80rpx;
    height: 8rpx;
    background: #1aa034;
    border-radius: 10rpx;
  }
}
</style>

使用时，在引入组件的界面里的标签中给值,如下，首页给title传了值就在首页显示，其他页面没有传值，就显示null

上面给主标题传了值，给副标题传值也是一样的，在props中先定义一个属性，然后再使用插值表达式接收这个属性值，最后在使用组件的页面去传值

<template>
  <view class="pubTitle">
    <view class="big">{{title}}</view>
    <view class="small">{{subtitle}}</view>
    <view class="line"></view>
  </view>
</template>

<script>
  export default {
    name:"pubTitle",
    props: ["title", "subtitle"],
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
.pubTitle {
  padding: 60rpx 30rpx;
  // 使文字居中
  text-align: center;
  background: #95E1D3;
  .big{
    font-size: 50rpx;
    font-weight: 600;
    color: #333;
  }
  .small {
    font-size: 28rpx;
    color: #888;
  }
  .line {
    display: inline-block;
    width: 80rpx;
    height: 8rpx;
    background: #1aa034;
    border-radius: 10rpx;
  }
}
</style>

[接下来在父组件中引入]

还是和之前一样，传了值的就显示传递的值，没有传值的显示null

<pubTitle title = "首页" subtitle="index page"></pubTitle>

[props传递动态数据和默认数据]

props传递的值是属性，所以也可以进行对属性的操作，例如绑定值，然后通过js方法传值

<template>
  <view>
    <pubTitle :title = "title" subtitle="about page"></pubTitle>
    <view class="">about页面</view>
    <navigator url="../index/index" open-type="redirect">回到首页</navigator>
    <navigator url="../list/list" open-type="redirect">回到列表页</navigator>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: "关于我们页面"
      };
    }
  }
</script>

<style lang="scss">

</style>

[传递默认值]

上面的props传值是用的数组类型，还可以用对象类型来控制传递的值类型

props: {  
title: String,  
likes: Number,  
isPublished: Boolean,  
commentIds: Array,  
author: Object,  
callback: Function,  
contactsPromise: Promise // or any other constructor  
}

规定值的类型，并定义默认值,默认值只有没有传值的时候才会起作用

<template>
  <view class="pubTitle">
    <view class="big">{{title}}</view>
    <view class="small">{{subtitle}}</view>
    <view class="line"></view>
  </view>
</template>

<script>
  export default {
    name:"pubTitle",
    props: {
      title: {
        type: String,
        default: "默认标题",
      },
      subtitle: {
        type:String,
        default: "默认副标题"
      },
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
.pubTitle {
  padding: 60rpx 30rpx;
  // 使文字居中
  text-align: center;
  background: #95E1D3;
  .big{
    font-size: 50rpx;
    font-weight: 600;
    color: #333;
  }
  .small {
    font-size: 28rpx;
    color: #888;
  }
  .line {
    display: inline-block;
    width: 80rpx;
    height: 8rpx;
    background: #1aa034;
    border-radius: 10rpx;
  }
}
</style>

定义一个默认值：时间戳

<template>
  <view class="pubTitle">
    <view class="time">{{time}}</view>
    <view class="big">{{title}}</view>
    <view class="small">{{subtitle}}</view>
    <view class="line"></view>
  </view>
</template>

<script>
  export default {
    name:"pubTitle",
    props: {
      title: {
        type: String,
        default: "默认标题",
      },
      subtitle: {
        type:String,
        default: "默认副标题"
      },
      time: {
        type: Number,
        // 获取当前时间(时间戳)
        default: Date.now()
      }
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
.pubTitle {
  padding: 60rpx 30rpx;
  // 使文字居中
  text-align: center;
  background: #95E1D3;
  .big{
    font-size: 50rpx;
    font-weight: 600;
    color: #333;
  }
  .small {
    font-size: 28rpx;
    color: #888;
  }
  .line {
    display: inline-block;
    width: 80rpx;
    height: 8rpx;
    background: #1aa034;
    border-radius: 10rpx;
  }
}
</style>

[定义数组和对象跟前面的基础数据类型不一样，不能直接写，需要用函数，然后return返回]

<template>
  <view class="pubTitle">
    <view class="time">{{time}}</view>
    <view class="big">{{test}}</view>
    <view class="small">{{subtitle}}</view>
    <view class="line"></view>
    <view class="list">{{list}}</view>
  </view>
</template>

<script>
  export default {
    name:"pubTitle",
    props: {
      test: {
        type: String,
        default: "默认标题",
      },
      subtitle: {
        type:String,
        default: "默认副标题"
      },
      time: {
        type: Number,
        // 获取当前时间(时间戳)
        default: Date.now()
      },
      list: {
        type: Array,
        default(){
          return [1,2,3]
        }
      }
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
.pubTitle {
  padding: 60rpx 30rpx;
  // 使文字居中
  text-align: center;
  background: #95E1D3;
  .big{
    font-size: 50rpx;
    font-weight: 600;
    color: #333;
  }
  .small {
    font-size: 28rpx;
    color: #888;
  }
  .line {
    display: inline-block;
    width: 80rpx;
    height: 8rpx;
    background: #1aa034;
    border-radius: 10rpx;
  }
}
</style>

在使用时，接收的值也是一个数组，如果写一个对象，就会报错，因为定义的是一个数组

<pubTitle :title = "test" subtitle="index page" :time="time" :list="[4,5,6]"></pubTitle>

对象类型

user: {
        type: Object,
        default(){
          return {name: "匿名", gender: "保密"}
        }
      }
    },