纯知识干货vue2学习之问答六

        是不是后端开发的程序员都惧怕学习前端呢。我接触过很多同事都有此感受。如果你也有一样的感受，那就来看看这些问答，然后试着亲自上手敲敲代码。久而久之，你就会不自觉的学会了前端开发知识。

        本文章列举了2个知识点的问答。       

        1，props: { date2: String, date: String, }, 上面vue2代码的作用是什么？

        这段 Vue2 代码的作用是：定义组件接收的 props（属性）接口，指定组件可以从父组件接收哪些数据。

        核心作用
        1. 定义组件接口

        props: {
          date2: String,  // 接收名为 date2 的字符串属性
          date: String,   // 接收名为 date 的字符串属性
        }

        这表示该组件可以接收两个属性：
        date2：字符串类型
        date：字符串类型

        详细解释
        1. 父组件传递数据：

<!-- 父组件 -->
<template>
  <div>
    <!-- 向子组件传递 props -->
    <child-component 
      :date="currentDate" 
      :date2="formattedDate"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: '2024-01-15',
      formattedDate: '2024年1月15日'
    }
  }
}
</script>

        2. 子组件接收和使用：

<!-- 子组件 -->
<template>
  <div>
    <p>日期1: {
  
  { date }}</p>
    <p>日期2: {
  
  { date2 }}</p>
  </div>
</template>

<script>
export default {
  props: {
    date2: String,
    date: String,
  },
  mounted() {
    console.log('接收到的日期:', this.date, this.date2);
  }
}
</script>

        props 的完整语法：

props: {
  date2: {
    type: String,        // 类型
    required: false