vue组件中使用props传递数据的实例详解

那么就开始详细讲解“vue组件中使用props传递数据的实例详解”吧。

什么是props

在Vue中，父组件可以通过props向子组件传递数据，子组件接收props后在组件内部使用这些数据。props是short for“properties”，它可以传递任何类型的数据，包括字符串、数字、数组、对象等等。

基本用法示例

假设我们有一个父组件parent和一个子组件child，父组件需要向子组件传递一个名为title的字符串类型数据，代码如下：

<!-- parent.vue -->
<template>
  <div>
    <child :title="title"></child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      title: '父组件中的title'
    }
  }
}
</script>

注意到这里我们使用了:title这种语法是Vue的绑定语法，表示将title属性绑定到父组件中data中的title变量。

然后是子组件中的代码：

<!-- child.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

注意到这里我们使用了props属性来接收父组件传递下来的数据，子组件即可使用这个数据了。我们通过props: ['title']来告诉Vue props需要接收哪些属性，在这个例子中我们只接收了一个名为title的属性。

定义props的详细参数

除了简单的使用props: ['title']来定义属性，我们还可以用完整的方式来定义props：

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
      default: '默认标题',
      validator: function(value) {
        // 对传入的value进行验证
        return true;
      }
    }
  }
}
</script>

上述代码中，我们定义了一个title属性。type: String表示这个属性的类型是字符串；required: true表示这个属性是必须的；default: '默认标题'表示如果没有传递该属性，则使用默认值；validator可以对传入的属性进行自定义验证。

示例二：向子组件传递数组类型数据

接着上面的例子，现在我们需要向子组件传递一个名为list的数组类型数据。

<!-- parent.vue -->
<template>
  <div>
    <child :list="list"></child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      list: [
        {id: 1, name: '小明'},
        {id: 2, name: '小红'},
        {id: 3, name: '小李'}
      ]
    }
  }
}
</script>

我们在父组件中定义了一个名为list的数组，然后通过:list="list"将它传递给子组件。

子组件中的代码：

<!-- child.vue -->
<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        {{ index + 1 }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['list']
}
</script>

子组件中，我们依然使用了props: ['list']来接收属性，然后通过v-for="(item, index) in list"来遍历父组件传递下来的数组数据。

这就是Vue组件中使用props传递数据的实例详解，希望能对你有所帮助。