有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue props 类型(Vue组件的使用之props)

vue 炮渣日记 3周前 (11-16) 22次浏览 已收录 0个评论 扫描二维码
为了提高组件的复用性,在封装vue组件时需要遵守如下原则:

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

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

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

  1. 什么是组件的props

Props是组件的自定义属性,组件的使用者可以通过props把数据传递到子组件的内部,供子组件内部进行使用。vue props 类型(Vue组件的使用之props)

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

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

2.在组件中声明props

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

vue props 类型(Vue组件的使用之props)

3.无法使用未声明的props

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

vue props 类型(Vue组件的使用之props)

4.动态绑定props的值

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

vue props 类型(Vue组件的使用之props)

5.Props的大小写命名

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

vue props 类型(Vue组件的使用之props)

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

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

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

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

vue props 类型(Vue组件的使用之props)

vue props 类型(Vue组件的使用之props)
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址