一、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>,简洁的恐怖,令人发指。。。