技术使用点二

66 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第13天,点击查看活动详情 >>

[二、model的使用]

默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定,因为自定的组件并没有默认的value和input事件,在使用时,我们需要按照上面那样显式的去声明定义这些东西。这时,model选项就派上用场了,在定义组件的时候,指定prop的值和监听的事件。

示例:

image.png

image.png

[三、props的使用]

props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。 你可以基于对象的语法使用以下选项:

  • type:可以是下列原生构造函数中的一种:String 、Number、 Boolean、 Array、 Object、 Date、 Function、 Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型,否则抛出警告。Prop 类型的更多信息在此。
  • default:any
    为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
  • required:Boolean
    定义该 prop 是否是必填项。在非生产环境中,如果这个值为 truthy 且该 prop 没有被传入的,则一个控制台警告将会被抛出。
  • validator:Function
    自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 falsy 的值 (也就是验证失败),一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

props在组件开发中的示例:

组件内部接收父组件的属性

父组件传递属性:

[四、$attrs的使用]

  • 只读
  • 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和style 除外),并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

示例:

image.png

[五、$listeners的使用]

image.png

  • 只读
  • 包含了父作用域中的 (不含.native修饰器的)v-on 事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。

[六、$emit的使用]

  • this.$emit('自定义事件名',要传送的数据);
  • 触发当前实例上的事件。附加参数都会传给监听器回调。

image.png

在父组件监听回调:

[七、$on的使用]

  • VM.on(事件,callback)callback回调on('事件名',callback) ---callback回调emit要传送的数据;
  • 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。