如何在Vue中使用函数式组件
本篇文章给大家分享的是有关如何在Vue中使用函数式组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
站在用户的角度思考问题,与客户深入沟通,找到连云港网站设计与连云港网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广、域名申请、雅安服务器托管、企业邮箱。业务覆盖连云港地区。
一、函数式组件和普通组件的区别
渲染快
没有实例,意味着没有(this)
没有生命周期(没有响应式数据)
二、组件函数的使用
1.以局部组件为例,将组件标记为functional=ture;
因为函数式没有实例,因此组件需要的一切都是通过context
参数传递,它是一个包括如下字段的对象:
props
:提供所有 prop 的对象children
: VNode 子节点的数组slots
: 一个函数,返回了包含所有插槽的对象scopedSlots
: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。data
:传递给组件的整个数据对象,作为createElement
的第二个参数传入组件parent
:对父组件的引用listeners
: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是data.on
的一个别名。injections
: (2.3.0+) 如果使用了inject选项,则该对象包含了应当被注入的属性。
在添加 functional: true 之后,需要更新我们的锚点标题组件的渲染函数,为其增加 context参数,并将 this.$slots.default 更新为 context.children,然后将 this.level 更新为 context.props.level。
因为函数式组件只是函数,所以渲染开销也低很多。
在作为包装组件时它们也同样非常有用。比如,当你需要做这些时:
程序化地在多个组件中选择一个来代为渲染;
在将 children、props、data 传递给子组件之前操作它们。
data() { return { changer:1 } },
components: { MyCmp:{ functional:true, //必要的设置 render: function (createElement, context) { function getcomp(cmp){ console.info(this); //输出为undefined,证明没有实例 if(cmp==1){ return comp1; }else{ return comp2 } } return createElement(getcomp(context.props.changer), { props:{ cmpData:context.props.data //为子组件传递数据 } } ); },
2. 定义要渲染的组件
var comp1={ props:['cmpData'], render:function(createElement,context){ return createElement('el-input',{ props:{ type:this.cmpData } }); }, mounted() { console.log(this) //这个组件为正常组件 }, } var comp2={ props:['cmpData'], render:function(createElement,context){ return createElement('el-button',{ props:{ type:this.cmpData } }); }, mounted() { console.log(this) //正常组件 }, }
三、在父组件中使用
四、理解渲染函数的参数
接下来说一下createElement 接受的参数:
第一个参数:可以是 {String | Object | Function}
不管是那种类型,最终返回到都是需要渲染的普通DOM标签,
第二个参数:是一个对象,这个参数是可选的,定义了需要渲染组件的参数,相对于普通HTML标签的属性是一样的。
还可以自定义指令的,Vue特有的东西,只是抽象一些,没有直接用Vue.directive()用起来直观。
第三个参数:子级虚拟节点,如果你这个节点只是单节点,没有嵌套节点,这个参数可以忽略。如果有的你就要使用一个数据数组的值位cerateElement()返回的虚拟节点。套路都是一样的。
// @returns {VNode} createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项对象,或者 // resolve 了上述任何一种的一个 async 函数。必填项。 'div', // {Object} // 一个与模板中属性对应的数据对象。可选。 { // 与 `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} scopedSlots: { default: props => createElement('span', props.text) }, // 如果组件是其它组件的子组件,需为插槽指定名称 slot: 'name-of-slot', // 其它特殊顶层属性 key: 'myKey', ref: 'myRef', // 如果你在渲染函数中给多个元素都应用了相同的 ref 名, // 那么 `$refs.myRef` 会变成一个数组。 refInFor: true }, // {String | Array} // 子级虚拟节点 (VNodes),由 `createElement()` 构建而成, // 也可以使用字符串来生成“文本虚拟节点”。可选。 [ '先写一些文字', createElement('h2', '一则头条'), createElement(MyComponent, { props: { someProp: 'foobar' } }) ] )
以上就是如何在Vue中使用函数式组件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
当前标题:如何在Vue中使用函数式组件
转载来源:http://myzitong.com/article/johcdc.html