详细聊聊vue中组件的props属性

下面详细讲解在Vue中组件的props属性的使用攻略：

什么是props属性？

props属性是Vue组件中的属性，用以接收父组件传递的数据，并在组件中使用。组件内部不能修改props属性，props属性应该被认为是父组件所有的数据。

如何使用props属性？

1. 在组件中定义props属性

当一个Vue组件中需要接受父组件传递的数据时，应该在组件中定义props属性。定义props属性的方式有两种：对象方式和数组方式。

对象方式

对象方式是比较常用的一种方式，它允许你为props属性提供一些校验规则。定义props属性的代码如下：

Vue.component('my-component', {
  props: {
    title: String, // title的类型必须为字符串
    price: {
      type: Number, // price的类型必须为数值型
      required: true, // price是必须传递的
      default: 10 // 如果没有传递price，则默认为10
    }
  }
})

在上面的代码中，我们定义了两个props属性：title和price。title的类型必须为字符串，而price的类型必须为数值型。price还被标记为必须传递的，如果没有传递price，则默认为10。

数组方式

数组方式是一种简单的方式，仅仅定义了props属性名而没有定义校验规则。定义props属性的代码如下：

Vue.component('my-component', {
  props: ['title', 'price']
})

在上面的代码中，我们定义了两个props属性：title和price。

1. 父组件传递数据给子组件

当子组件定义好props属性后，就可以在父组件中传递数据给子组件了。父组件向子组件传递数据的方式有两种：props单向数据流和.sync修饰符。

props单向数据流

在父组件中使用子组件时，可以通过props属性向子组件传递数据。传递数据的方式有两种：字符串传递和对象传递。

• 字符串传递

使用字符串传递数据的代码如下：

<template>
  <my-component title="商品标题" price="100"></my-component>
</template>

在上面的代码中，我们从父组件通过props属性传递了两个数据：title和price。

• 对象传递

使用对象传递数据的代码如下：

<template>
  <my-component v-bind="product"></my-component>
</template>

<script>
export default {
  data() {
    return {
      product: {
        title: '商品标题',
        price: 100
      }
    }
  }
}
</script>

在上面的代码中，我们从父组件通过v-bind指令传递了一个对象数据。

.sync修饰符

在Vue2.3.0版本以后，可以通过.sync修饰符实现父组件双向绑定子组件数据。

使用.sync修饰符的代码如下：

<template>
  <my-component v-bind:title.sync="product.title"></my-component>
</template>

<script>
export default {
  data() {
    return {
      product: {
        title: '商品标题',
        price: 100
      }
    }
  }
}
</script>

在上面的代码中，我们从父组件通过v-bind指令传递了一个数据，并使用.sync修饰符实现父组件双向绑定子组件数据。

示例

下面是一个完整的示例，演示如何在Vue组件中使用props属性。

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

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

在上面的代码中，我们创建了一个my-component组件，并在组件中定义了两个props属性：title和price。title的类型为字符串，price的类型为数值型。price被标记为必须传递的，如果没有传递则默认为10。在组件中使用title和price来展示数据。

在父组件中使用my-component组件的代码如下：

<template>
  <my-component title="商品标题" :price="100"></my-component>
</template>

在上面的代码中，我们从父组件向my-component组件传递了两个数据：title和price。其中price使用了v-bind指令，表示需要从父组件传递数据进来。

另一个示例：

<template>
  <div>
    <input v-model="product.title">
    <my-component v-bind:title.sync="product.title"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {
        title: '商品标题',
        price: 100
      }
    }
  }
}
</script>

在上面的代码中，我们创建了一个父组件，并在父组件中使用v-model指令为product.title赋值。然后我们在父组件中使用my-component组件，并使用v-bind指令以及.sync修饰符将product.title双向绑定到my-component组件的title属性中。

总结

以上就是使用Vue组件中props属性的完整攻略，我们学习了props属性的定义方法、props单向数据流和.sync修饰符双向数据流的使用方式，以及提供了两个示例来说明如何在Vue组件中使用props属性。