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,vue.js,javascript,ecmascript)