Vue官方文档Vue.extend、Vue.component、createElement、$attrs/$listeners、插槽的深入理解

一、Vue.extend({})。

看官网文档介绍，Vue.extend({})返回一个Vue的子类，那么这个Vue子类是啥玩意儿呢？我直观感觉它就是创建出一个组件而已啊，那么它又和Vue.component({})不就重复了吗，有啥区别呢？

参考文章如下：

用法：使用Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象，其中,data选项中必须是函数

描述：Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂在到自定义元素上

需要手动挂载，可以挂载到自定义元素上，元素的标识可以是id，也可以是class如：

var author = Vue.extend({
  template: "<p><a :href='url'>{{author}}</a></p>",
  data : function() {
    return {
      author : 'vamous',
      url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
    }
  }
});

以上代码片段摘自https://blog.csdn.net/dear_mr/article/details/72627214，但是我试验的时候，提示实例化的变量名首字母要大写，所以要var Author = 。。。

<div id="author" class="author"></div>，可以这样挂载：new Author().$mount('#author'),也可以这样挂载new Author().$mount('.author');

如果文档中没有直接挂载的元素，也可以这样，先let author = new Author().$mount(),然后再document.querySelector('#el').appendChild(author.$el),这样就把实例插入到文档中了，其中$el其实就是template变成DOM之后的东东。

如果，构造的东西里面需要传属性值，则只需在new的时候通过propsData来传入。

var author = Vue.extend({
  template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",
  data : function() {
    return {
      author : 'vamous',
      url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
    }
  },
  props : ['name']
});

new author({propsData: {name : 'dear_mr'}}).$mount('#author');

参考自：https://blog.csdn.net/dear_mr/article/details/72627214

二、Vue.component({})。

创建并注册组件，组件的options跟Vue实例的选项大体一致，但是data得用function的形式，data(){return {}}。

三、Vue原生模板渲染函数CreateElement。

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

　　首先，CreateElement函数返回的是VNode虚拟DOM对象，函数第一个参数可以是字符串(一般是标签名)、对象(组件选项对象)、函数(返回上述两项或者promise resolve之后返回上述两项)。

第二个参数是该组件的数据对象，该数据对象可以有以下选项：

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层属性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

这里面的slot属性，着实让我废了一番周折，看它介绍是如果有父组件，父组件中有slot，它就指定了父组件的slot，结果我把它放到带slot的组件中时，发现根本不会替换，然后反复折腾，才发现，它是需要环境的，比如可以这样用：

HTML：

<test>
   <template slot="child">11111</template>
   <span>22222</span>
</test>

JS:

export default Vue.component('test', {
  render: function (createElement) {
    let child = createElement('div', {slot: 'child',
      attrs: {
        id: 'child'
      }}, '我是child')
    return createElement('div', [child, this.$slots.default])
  }
})　

这样的话，相当于child在渲染时，会占据div的slot="child"的插槽。而对于test来讲，即return 的这个createElement,添加slot好像没有效果，或者说拿它去放到现成的带有slot的组件下，它不会自动填充，相当于二者之间没有建立关系。

四、$attrs、$listeners的使用。

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

这个非常有意思，它说不包含prop被识别的属性，但是你依然可以使用props属性去接收，只不过，你接收一个，$attrs里面就少一个，可能继续往子组件里面越传越少，好像层层节流一样，上面本来发下来好多钱，每一层通过props扣一部分，真正到下面的就剩一个空壳子了。。。

$listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。有了$attrs的层层节流特性以后，我以为$listeners也会一样，父组件处理之后，$listeners中就会去掉该事件呢，但是试验结果是，父组件即使处理了，它仍然会继续向爷爷组件传递，然后爷爷组件也可以正常响应并处理事件，好像一个pipe一样，层层处理。

五、插槽的新旧版对比。

旧版插槽的使用<template slot="slotname" slot-scope="scope">{{scope.XXX}}</template>，而新版使用<template v-slot:slotname="scope">{{scope.XXX}}</template>，默认插槽取scope的值可以省略slotname，即可以如此：<template v-slot="scope">{{scope.XXX}}</template>

新版的更是有简写，可以直接使用#代替v-slot:，也就是说可以使用<template #slotname="scope">{{scope.XXXX}}</template>，更有甚者，可以使用解构，也就是说可以这样：<template #slotname="{XXX}">{{XXXX}}</template>，简洁的恐怖，令人发指。。。