高阶组件;高阶组件"/>
vue 高阶组件;高阶组件
vue 高阶组件;高阶组件
文章目录
- vue 高阶组件;高阶组件
- 1. 什么是高阶组件
- 2. 高阶组件的作用
- 3. 高阶组件的使用
- 例子1:创建一个简单的高阶组件
- 例子2:使用element-ui的高阶组件
1. 什么是高阶组件
高阶组件是一个函数,传给它一个组件,它返回一个新的组件。
2. 高阶组件的作用
高阶组件的作用是用于组件之间代码的复用,它不会修改原组件,只是通过包裹的方式来增强组件的功能。比如:表单验证、表单提交、表单重置、表单数据回显等等。
3. 高阶组件的使用
// 高阶组件
function withComponent (Component) {return {render (h) {return h(Component)}}
}
// 普通组件
const Component = {render (h) {return h('div', '我是普通组件')}
}
// 使用高阶组件包裹普通组件
const NewComponent = withComponent(Component)
例子1:创建一个简单的高阶组件
这里有一个例子,用于展示高阶组件的使用。你可以使用你擅长的框架来实现这个例子。比如:Vue、React、Angular等等。
这里以Vue为例。
让我们使用刚才的高阶组件来实现一个功能:点击按钮,弹出提示框。
<template><div><h1>高阶组件</h1><NewButton></NewButton></div>
</template>
<script>
import { h } from 'vue'
// 高阶组件
function withAlert(Component) {return {render() {return h(Component, {onClick: () => { alert('点击了按钮')}})}}
}
// 普通组件
const Button = {render() {return h('button','hello world');}
}
// 使用高阶组件包裹普通组件
const NewButton = withAlert(Button)
export default {components: {NewButton}
}
</script>
清注意,在vue2中,你可能需要使用:
on:{click:()=>{alert('点击了按钮')} }
来代替:
onClick:()=>{alert('点击了按钮') }
例子2:使用element-ui的高阶组件
这里使用一个常用的UI框架element-ui来实现一个例子,让我们来看看element-ui是如何使用高阶组件的。
<template><div style="margin: 50px;"><h1>高阶组件</h1><NewButton></NewButton></div>
</template>
<script>
import { ElInput } from 'element-plus';
// 高阶组件
const NewButton = {components: {ElInput},data() {return {value: ''}},render() {return (<ElInput v-model={this.value} />)}
}
export default {components: {NewButton}
}
</script>
你可能已经注意到,这里我们没有使用h函数,而是使用了jsx语法。如果是初学者,你可能会感觉到有些困惑。你可以去多了解一下jsx语法,高阶组件的使用不仅仅局限于h函数。
更多推荐
vue 高阶组件;高阶组件
发布评论