浅谈Vuejs Prop基本用法

在Vue.js中，prop是被用来从父组件传递数据到子组件的一个自定义属性。在这篇文章中，我们将会浅略介绍prop的基本用法。

prop的基本语法

使用prop需要在子组件中定义一个props属性，该属性包含一个对象，该对象的每个属性都是我们期望从父组件接收的数据。

例如：

<template>
  <div>
    <h1>{{title}}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

在上述代码中，声明了一个props属性，接收一个名为title的属性。title属性的类型为字符串，required属性的值为true，这意味着父组件必须提供title属性的值。

prop的数据类型

prop的数据类型可以通过设置type属性来指定。如果属性的数据类型不正确，Vue会在浏览器的控制台中输出警告。

以下是一些可用的数据类型：

• String
• Number
• Boolean
• Object
• Array
• Date
• Function

数组/对象类型的prop

如果我们需要接收一个数组或对象类型的属性，一定要记住使用一个函数来返回该类型的默认值。这是因为对象及数组都是引用类型，而默认值如果不使用函数定义Vue会将它们共享在所有组件实例之间。

例如：

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: function () {
        return []
      }
    }
  }
}
</script>

在上述代码中，items是一个数组类型的props，默认值为一个新的空数组。

prop验证

当父组件给子组件传递数据时，我们可以使用一些属性对数据进行验证，包括类型、需不需要等等。

type属性

在使用prop时，我们可以通过type属性指定数据类型。

例如：

<script>
export default {
  props: {
    age: {
      type: Number
    }
  }
}
</script>

在上述代码中，age是一个数字类型的props。

required属性

使用required属性可以指定该props属性是否是必须的。

例如：

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

在上述代码中，name是一个必需的字符串类型的props。

default属性

使用default属性可以指定该props属性的默认值。

例如：

<script>
export default {
  props: {
    flag: {
      type: Boolean,
      default: true
    }
  }
}
</script>

在上述代码中，flag是一个布尔类型的props，默认值为true。

示例

父组件传递props给子组件

<!-- 父组件 -->
<template>
  <div>
    <child-component title="Hello World"></child-component>
  </div>
</template>

<script>
import ChildComponent from 'path/to/child-component.vue'

export default {
  components: {
    'child-component': ChildComponent
  }
}
</script>

<!-- 子组件 child-component.vue-->
<template>
  <div>
    <h1>{{title}}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

在上述例子中，我们展示了从父组件传递数据到子组件的基本用法，父组件传递一个title属性的值给子组件。

对象类型的prop

<!-- 父组件 -->
<template>
  <div>
    <child-component :user="user"></child-component>
  </div>
</template>

<script>
import ChildComponent from 'path/to/child-component.vue'

export default {
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      user: {
        name: 'John Doe',
        age: 28
      }
    }
  }
}
</script>

<!-- 子组件 child-component.vue-->
<template>
  <div>
    <h1>{{user.name}}</h1>
    <p>{{user.age}}</p>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: function () {
        return {}
      }
    }
  }
}
</script>

在上述例子中，我们展示了如何在父组件中传递一个对象类型的prop，父组件中的数据会被子组件接收到，并展示在页面上。在声明父组件传递给子组件的prop时，需要使用:user的方式来传递实际的对象参数。

结论

在Vue.js中，prop是非常强大的一种机制。在实际开发中，我们可以使用prop以及其他Vue.js特性来轻松地构建各种各样的组件，帮助我们更好的组织和管理代码，在开发过程中可以轻易的进行组件的嵌套及组合。