Vue props用法详解(小结)

在Vue中，props是一个常用的属性传递方式。它允许你从父组件向子组件传递数据。

基本用法

父组件中，使用v-bind指令向子组件传递数据。子组件中，定义props属性接收数据。

以下是一个简单的例子：

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

<script>
import ChildComponent from './components/ChildComponent'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>


<!-- 子组件 -->
<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

在上面的例子中，父组件向子组件传递了一个名为message的数据，子组件接收到数据后，在模板中使用msg来展示。

props验证

为了保证代码的质量和可读性，Vue提供了对props数据类型的验证。验证的方法就是在子组件中使用props属性，并指定需要验证的属性和其对应的数据类型。

以下是一个带有props验证的例子：

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

<script>
import ChildComponent from './components/ChildComponent'

export default {
  components: {
    ChildComponent
  }
}
</script>


<!-- 子组件 -->
<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    price: {
      type: Number,
      required: true
    }
  }
}
</script>

在上面的例子中，子组件需要接收一个price属性，该属性的值必须是一个数值类型，且是必须的。如果父组件没有传递price属性，或者传递的price属性不是一个数值类型，就会在控制台中输出一个警告信息。

props默认值

在一些特殊情况下，你可能需要为props设置默认值。这可以通过在子组件中，使用props属性，并指定需要设置默认值的属性和其对应的值来完成。

以下是一个带有props默认值的例子：

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent'

export default {
  components: {
    ChildComponent
  }
}
</script>


<!-- 子组件 -->
<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '默认标题'
    }
  }
}
</script>

在上面的例子中，如果父组件没有传递title属性，就会将其默认设置为'默认标题'。