前端vue 自定义组件

Vue组件的使用之props

为了提高组件的复用性，在封装vue组件时需要遵守如下原则：

① 组件的DOM结构、Style样式要尽量复用

② 组件中要显示的数据，尽量由组件的使用者提供

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

什么是组件的props

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

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

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

2.在组件中声明props

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

3.无法使用未声明的props

如果父组件给子组件传递了未声明的props属性，则这些属性会被忽略，无法被子组件使用。

4.动态绑定props的值

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

5.Props的大小写命名

组件中如果使用“camelCase（驼峰命名法）”声明了props属性的名称，则有两种方式为其绑定属性值。

注意：prop 的定义应该尽量详细，至少需要指定其类型

细致的 prop 定义有两个好处：

它们写明了组件的 API，所以很容易看懂组件的用法；

在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。