接触一个东西,在技术上我们的一般思路是:这是个啥?怎么使用?有何存在意义?

本质探索

$props:当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

$attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

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

vuejs API

通过举个例子来聊聊。下面有一个子组件和一个父组件,引入就不详细了,写上template模板。

//childrenProp.vue(子组件)
<template>
    <label>
      <input v-on:input="$emit('input', $event.target.value)">
    </label>
</template>
// 父组件
<template>
    <div>
        <chidrenProp 
          v-model="username"
          label="pyc"
          value="12"
          class="username-input"
          placeholder="Enter your username">
        </chidrenProp>
    </div>
</template>

在childrenProp.vue组件中,我们来打印一下:

从上面打印的结果总结:

beforeCreate执行的时候,props还没有之执行,也就是undefined,但是$attrs和$listeners已经有了。

我们在mounted中打印一下实例看看:

 这三个属性就很明了结合官方解释理解一下。

注意:上面我们在父组件中明明没有绑定input事件,但是截图看$listeners里面出现了input属性,通过实践发现,是v-model引起的。也就是默认就有这个input事件,这样才能动态改动值。

继承原生属性

比如上面的例子,input输入框。我们有很多的原生属性,比如:name、placeholder、disabled等等。我们如果都定义在props显示接收,未免太过繁琐。所以官网出现了:v-bind="$props"这样的操作。v-bind

如果父组件传递很多的原生属性,那么我们在子组件中直接可以:

//good
<input v-bind="$props">

//bad
//而不是下面这样,如果很多的属性就特别繁琐
<input :name="name" :placeholder="placeholder" :disabled="disabled">

继承自定义组件的属性

用于多级组件嵌套需要传递数据的时候,如果仅仅是传递数据,使用vuex就有点大材小用。

我们就可以直接使用上面的v-bind的方法,将值传递过去。具体参见 嵌套组件传递数据,$attrs

inheritAttrs属性

默认为true,继承所有的父组件属性(除props的特定绑定)作为普通的HTML特性应用在子组件的根元素上,如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承。

上面的组件childrenProp.vue,我们在不设置inheritAttrs属性也就是默认为true的时候,看看DOM渲染。

那么如果设置为false呢?

 

结合定义,就很清楚了解了。

自己也在学习中,就比如$props属性也是新增2.2.0新增的。一起学习交流吧

参考:

https://zhuanlan.zhihu.com/p/25623356

https://github.com/jkchao/blog/issues/15

官网API

Logo

前往低代码交流专区

更多推荐