本篇文章给大家分享的是有关如何在Vue中使用函数式组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
<李> 渲染快
<李> 没有实例,意味着没有(这)
<李> 没有生命周期(没有响应式数据)
<强>二、组件函数的使用
1。以局部组件为例,将组件标记为<代码>功能=真正的;
因为函数式没有实例,因此组件需要的一切都是通过<代码>中> <李> <代码>道具> :儿童VNode子节点的数组<代码>槽> scopedSlots> :<代码>数据传递给组件的整个数据对象,作为<代码> createElement> :对父组件的引用:<代码>听众(tripwire +)一个包含了所有父组件为当前组件注册的事件监听器的对象。这是<代码>数据。> :<代码>注射(tripwire +)如果使用了注入选项,则该对象包含了应当被注入的属性。
在添加功能:真实之后,需要更新我们的锚点标题组件的渲染函数,为其增加上下文参数,并将这个。美元slots.default更新为背景。孩子,然后将这一点。水平更新为context.props。水平。
因为函数式组件只是函数,所以渲染开销也低很多。
在作为包装组件时它们也同样非常有用。比如,当你需要做这些时:
<李> 程序化地在多个组件中选择一个来代为渲染;
<李> 在将孩子,道具、数据传递给子组件之前操作它们。
数据(),{
,,,return {
,,,,改变:1
,,,}
},才能 组件:,{
,,,MyCmp: {
,,,,,功能:真的,,,//必要的设置
,,,,,呈现:,function (createElement,上下文),{
,,,,,,,function getcomp (cmp) {
,,,,,,,,,console.info(这);,//输出为定义,证明没有实例
,,,,,,,,,如果(cmp==1) {
,,,,,,,,,,,return comp1文件,,
,,,,,,,,,其他}{
,,,,,,,,,,,return comp2
,,,,,,,,,}
,,,,,,,}
,,,,,,,return createElement (getcomp (context.props.changer),
,,,,,,,{
,,,,,,,,,道具:{
,,,,,,,,,,,cmpData: context.props.data //为子组件传递数据
,,,,,,,,,}
,,,,,,,}
,,,,,,,);
,,,,,}, , 2。定义要渲染的组件
var comp1文件={
道具才能:[& # 39;cmpData& # 39;],
渲染才能:函数(createElement上下文){
,,,return createElement (& # 39; el-input& # 39;, {
,,,,,道具:{
,,,,,,类型:this.cmpData
,,,,,}
,,,});
,,},
安装(),{才能
,,,console.log(这),//这个组件为正常组件
,,},
}
var comp2={
道具才能:[& # 39;cmpData& # 39;],
渲染才能:函数(createElement上下文){
,,,return createElement (& # 39; el-button& # 39;, {
,,,,,道具:{
,,,,,,类型:this.cmpData
,,,,,}
,,,});
,,},
安装(),{才能
,,,console.log(这),//正常组件
,,},
} <强>三,在父组件中使用
& lt; template>
& lt;才能div>
,,,& lt; el-input v模型=癱hanger",占位符=白幼榧白４? lt;/el-input>
,,,& lt; my-cmp :改变=癱hanger"祝辞& lt;/my-cmp>
& lt;才能/div>
& lt;/template>
& lt; script> <强>四、理解渲染函数的参数
接下来说一下createElement接受的参数:
第一个参数:可以是,{字符串| |对象函数}
不管是那种类型,最终返回到都是需要渲染的普通DOM标签,
第二个参数:是一个对象,这个参数是可选的,定义了需要渲染组件的参数,相对于普通HTML标签的属性是一样的。
还可以自定义指令的,Vue特有的东西,只是抽象一些,没有直接用Vue.directive()用起来直观。
第三个参数:子级虚拟节点,如果你这个节点只是单节点,没有嵌套节点,这个参数可以忽略。如果有的你就要使用一个数据数组的值位cerateElement()返回的虚拟节点。套路都是一样的。
//, @returns {VNode}
createElement (
,//{String |, Object |,函数}
,//一个,HTML 标签名,组件选项对象,或者
,//resolve 了上述任何一种的一个,async 函数。必填项。
,& # 39;div # 39;
,//{对象}//大敌;一个与模板中属性对应的数据对象。可选。
,{//,,,与,v-bind:类的,的,API 相同,//,才能接受一个字符串,对象或字符串和对象组成的数组
& # 39;才能类# 39;:,{
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
