当前位置: 首页 > Web前端 > vue.js

Vue函数式组件使用技巧

时间:2023-03-31 18:25:36 vue.js

什么是函数式组件?它不管理任何状态,也不监听传递给它的任何状态,并且没有生命周期方法。它只是一个接受一些道具的功能。简单地说,它是一种编写无状态和无实例组件的基本方法:Vue.component('my-component',{functional:true,//Propsareoptionalprops:{//...},//forMake弥补缺失的实例//提供第二个参数作为上下文render:function(createElement,context){//...}})。vue单文件组件写法...因为函数式风格组件没有this,参数通过上下文传递。具有以下字段的对象:props:提供所有props的对象children:VNode子节点数组slots:返回包含所有插槽的对象的函数scopedSlots:(2.6.0+)暴露传入作用域的对象插槽。还将普通插槽公开为函数。data:传递给组件的整个数据对象,作为createElement的第二个参数传递给组件目的。这是data.on的别名。injections:(2.3.0+)如果使用了inject选项,这个对象包含应该被注入的属性。下面总结的使用技巧是根据在使用类和样式绑定时引入功能组件,直接绑定外层的类名和样式是无效的。data.class表示动态绑定类,data.staticClass表示绑定静态类,data.staticClass表示绑定内联样式TitleView.vue

{{props.title}}

Test.vuecomponent组件导入功能组件引入其他组件的方式如下,具体参考:https://github.com/vuejs/vue/...<模板功能>{{props.title}}
$options计算属性有时需要修改prop数据源,使用Vue提供的$options属性来访问这个特殊的方法。<模板功能>

{{$options.upadteName(props.title)}}

总结虽然速度和性能是函数式组件的优势,但不代表可以滥用,所以需要需根据实际情况取舍取舍。例如,在某些显示组件中。例如,按钮、标签、卡片或带有静态文本的页面是功能组件的理想选择。