vue中创建组件的几种方式,你都会吗?

h函数

h() 函数是用于创建虚拟 DOM 节点的函数。

h() 函数的参数

  • type 参数可以是字符串或组件。如果它是字符串,则表示元素标签名。如果它是组件,则表示要创建的组件。
  • props 参数可以是对象或 null。如果它是对象,则表示元素的属性。如果它是 null,则表示元素没有属性。
  • children 参数可以是数组或 null。如果它是数组,则表示元素的子节点。如果它是 null,则表示元素没有子节点。

h() 函数可以用来创建任何类型的虚拟 DOM 节点,包括元素、文本节点、组件等。

例如要实现如下效果

js 复制代码
import { createApp, h } from '../lib/vue.esm-browser.js'

const app = createApp(h('div', {
    style:{backgroundColor: 'red', width: 'fit-content', height: '50px'}, 
    onClick:()=>alert('父盒子')
}, [
    h('div', null, '子盒子')
]))

app.mount('#app')

render函数

用于编程式地创建组件虚拟 DOM 树的函数。实际内部使用的是h()

js 复制代码
const app = createApp({ 
    render() {
        return h('div', {
            style: { backgroundColor: 'red', width: 'fit-content', height: '50px' },
            onClick: () => alert('父盒子')
        }, [
            h('div', null, '子盒子')
        ])
    }
})

实现的效果和上面的一样

组件的几种形式

对象形式的组件

适用于有构建步骤和无构建步骤的项目

js 复制代码
import { createApp } from '../lib/vue.esm-browser.js' 

const app = createApp({
    template: `
        <h1 style="color:red" @click='handler'>{{count}}</h1>
        <button @click='sumHandler'>{{sum}}</button>
    `,
    setup() {
        let sum = 0
        let sumHandler = () => alert(sum)
        return { sum, sumHandler }
    },
    data() {
        let count = 0
        return { count }
    },
    methods: {
        handler() {
            alert(this.count)
        }
    }
})

app.mount('#app') 

可以把template节点换成render节点,但那样子编写成本会变高,因为你要通过编写h()返回虚拟dom。你也可以直接编写template节点,最后它会被编译为render函数。

单文件组件

适用于有构建步骤的项目

export default 那个对象的写法和对象形式的组件的写法一致

js 复制代码
<template>
	<h1 style="color: red" @click="handler">{{ count }}</h1>
	<button @click="sumHandler">{{ sum }}</button>
</template>

<script>
	import { ref } from 'vue'
    
	export default {
		data() {
			let count = 0
			return { count }
		},
		methods: {
			handler() {
				this.count++
			},
		},
		setup() {
			let sum = ref(0)
			let sumHandler = () => sum.value++
			return { sum, sumHandler }
		},
	}
</script>

<style></style>

另一种写法是在<script setup>节点里编写所有代码,上面的例子完全可以写成这样:

js 复制代码
<template>
	<h1 style="color: red" @click="handler">{{ count }}</h1>
	<button @click="sumHandler">{{ sum }}</button>
</template>

<script setup>
	import { ref } from 'vue'
    
	let count = ref(0)
	let handler = () => count.value++
	let sum = ref(0)
	let sumHandler = () => sum.value++
</script>

<style></style>

函数式组件

函数式组件是一种定义自身没有任何状态的组件的方式。它们很像纯函数:接收 props,返回 vnodes。优点:高性能渲染代码复杂度低。这里不过多介绍这种组件

js 复制代码
<template>
	<CurrentTime mes="props属性" email="attr属性" />
</template>

<script setup>
	import { h } from 'vue'
	let CurrentTime = (props, context) => {
		const now = new Date()
		console.log(props.mes)
		console.log(context.attrs.email)
		return h('div', null, `当前时间:${now.toLocaleString()}`)
	}
	CurrentTime.props = ['mes']
</script>

<style></style>
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui