Vue技术_props配置（提高了组件的复用性）

一、props简介

在Vue中，props属性是用于组件之间传递数据的一种机制。通过在子组件中定义props属性，可以接收父组件传递的数据，并在子组件中使用这些数据。

下面是props属性的一些详细说明：

1.定义和传递props： 在子组件中使用props属性定义接收的属性，可以是静态的或动态的。在父组件中使用子组件时，通过在子组件标签上通过绑定属性的方式将数据传递给子组件。

子组件定义：

<template>
  <div>{{ myProp }}</div>
</template>

<script>
export default {
  props: {
    myProp: {
      type: String, // 属性的数据类型
      required: true, // 是否必需
      default: 'default value' // 默认值
    }
  }
}
</script>

父组件传递：

<template>
  <my-component :my-prop="value"></my-component>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      value: 'Hello props!'
    };
  }
}
</script>

2.类型检查： 通过type属性指定props的预期数据类型。Vue会在开发环境下对传递的数据进行类型检查，以确保数据类型的一致性。若类型检查失败，将会产生警告。

3.必需属性： 使用required属性可以指定props是否为必需属性。默认情况下，props是非必需的，即可以不传递该属性。当required设为true时，如果没有传递必需属性，Vue会发出警告。

4.默认值： 使用default属性可以为props指定一个默认值。当父组件没有传递对应的属性时，子组件将使用默认值。

5.动态属性： 除了静态属性，props还可以绑定动态属性。例如可以使用v-bind或简写为:将父组件中的数据传递给子组件的props。

<my-component :my-prop="dynamicValue"></my-component>

动态属性可以响应式地根据父组件数据的变化而变化。

总结而言，props属性用于在Vue组件中接收父组件传递的数据。通过props属性的定义和使用，可以实现组件间的数据传递和通信。

二、组件的props

2.1   props 的概念

为了方便使用者为组件提供要展示的数据，vue 组件提供了 props 的概念。

props 是组件的自定义属性，组件的使用者可以通过 props 把数据传递到子组件内部，供子组件内部进行使用。

props 的作用：
父组件通过 props 向子组件传递要展示的数据。

props 的好处：
提高了组件的复用性。
 

2.2  在组件中声明 props

在封装 vue 组件时，可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。示例代码如下：

<template>
  <div>
    <h3>标题：{{title}}</h3>
    <h5>作者：{{author}}</h5>
    <h6>发布时间：{{pubTime}}</h6>
  </div>
</template>

<script>
export default {
  name: 'MyArticle',
  // 外界可以传递指定的数据，到当前的组件中
  props: ['title', 'author', 'pubTime']
}
</script>

父组件向子组件传值，可以直接传值，也可以使用动态属性绑定。

可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值。

<template>
  <div>
    <h1>这是 App.vue 根组件</h1>
    <hr />
    <my-article :title="info.title" :author="'post by ' + info.author" pub-time="1989"></my-article>
  </div>
</template>

<script>
import MyArticle from './Article.vue'

export default {
  name: 'MyApp',
  data() {
    return {
      info: {
        title: 'abc',
        author: '123',
      },
    }
  },
  components: {
    MyArticle,
  },
}
</script>

使用v-bind指令的形式向子组件中的props配置项传递数据，传递的为js表达式的结果，如果没有使用v-bind，传递的为字符串类型的数据。

三、总结