vue2中的props属性

vue2中的props属性

props传递&使用

vue2中的props属性_第1张图片

调用子组件是创建子组件的实例

传递属性::a="a",非字符串都用v-bind

vue2中的props属性_第2张图片

created: 属性 状态 computed watch都处理好了

  1. 会被挂载到实例上
  2. get/set劫持:get获取最新,set目的抛出错误

vue2中的props属性_第3张图片

修改props

this.x=xxx时触发set劫持函数时,当直接修改props时,

vue2中的props属性_第4张图片

涉及到改props的情况:

  1. 让父组件重新修改
  2. 把属性赋值给一个状态,之后改状态

初始化属性 -> 初始化状态,所以在data中是能拿到props

vue2中的props属性_第5张图片

$attrs

没有props注册接收的属性,会被实例.$attrs捕捉到(没有做劫持)。

vue2中的props属性_第6张图片

inheritAttrs:false

特殊的属性:class/style,给子组件根节点设置

vue2中的props属性_第7张图片

默认局部组件 类组件:一导二注三调

驼峰camelCase & 中划线kebabCase是能混用的

vue2中的props属性_第8张图片

v-bind=对象,把属性作为props

null undefined会通过任何规则校验

validator:校验函数

vue2中的props属性_第9张图片

属性存在的意义

vue2中的props属性_第10张图片

  1. 提高组件的复用性
  2. 基于传递不同的属性实现不同的功能

vue2中的props属性_第11张图片

你可能感兴趣的:(javascript,前端,开发语言)