选项

本节介绍@jiess/plus核心库的拓展

vue插槽

在vue技术栈中，使用插槽可以方便的将组件嵌入到子组件中指定的位置

vue2和vue3的插槽

在vue2中，具名插槽和作用域插槽是独立的两种插槽，在使用方面，没有直接的相关性， 也就是说无法用具名插槽的形式使用作用域插槽

在vue3中，具名插槽和作用域插槽被统一起来，可以用具名插槽的形式使用作用域插槽， 但在使用插槽时，与vue2有很大的区别

使用vue插槽

Jiess中可以直接使用vue组件，也可以使用vue组件的插槽：

• 使用vue2组件插槽

// 定义含有插槽的Vue2组件
const ChildVue2 = {
	render(h) {

		return h('div', [
			// vue2组件中的默认插槽
			this.$slots.default,
			this.$slots.test1,
			// 定义vue2组件中的作用域插槽
			this.$scopedSlots.test2({
				innerData: '数据通过作用域插槽传出'
			})
		]);

	}
}


// ============插槽的使用过程==========
export default function() {

	this.add(
		this.render({
				is: Child1,
				// 用$slots使用插槽
				$slots: {
					// default () {
					// 	return '使用vue2组件发默认作用域插槽，具有更高优先级'
					// }
					
					// 作用域插槽，用于传出子元素的数据
					test2({ innerData }) {
						// 返回基础数据；或调用getNative，返回vue2虚拟节点对象
						return this.render({ children: innerData }).getNative()
					}
				}
			},
			this.render({
				children: '使用vue2组件中的默认插槽'
			}),
			this.render({
				slot: 'test1',
				children: '使用vue2组件中的具名（test1）插槽'
			}),
			this.render({
				children: '其余元素也自动使用默认插槽'
			}),
		)
	);

}

注：vue2作用域插槽中的渲染内容，必须返回vue2组件对象，或基础类型数据

• 使用vue3组件插槽

与使用Jiess组件插槽的方式一致，广义上不再区分具名插槽和作用域插槽； 定义$slots对象，键为插槽名，值为函数，返回要渲染的内容； 函数的形参，可获取被使用组件反馈的数据

// 定义含有插槽的Vue3组件
import { h } from 'vue';
const ChildVue3 = {
	setup(props, { slots }) {
		
		return h('div', [
			// vue2组件中的默认插槽
			slots.default(),
			slots.test1(),
			// 定义vue2组件中的作用域插槽
			slots.test2({
				innerData: '数据通过作用域插槽传出'
			})
		]);

	}
}


// ============插槽的使用过程==========
export default function() {

	this.add(
		this.render({
				is: Child1,
				// 用$slots使用插槽
				$slots: {
					test1() {
						return this.render({
							slot: 'test1',
							children: '使用vue3组件中的具名（test1）插槽'
						})
					},
					// 作用域插槽，用于传出子元素的数据
					test2({ innerData }) {
						return this.render({
							children: innerData
						})
					},
					// default () {
					// 	return '直接使用default默认插槽，具有更高的优先级'
					// }
				}
			},
			this.render({
				children: '使用vue3组件中的默认插槽'
			}),
			this.render({
				children: '其余元素也自动使用默认插槽'
			}),
		)
	);

}

生命周期钩子

Jiess组件会映射为原框架组件，所以其生命周期，就是原框架生命周期的钩子

说明

• 生命周期钩子是由原框架生命周期触发调用，钩子的命名基本参考 Vue3
• React底层使用函数式组件，固React环境为模拟生命周期触发

setup 生命周期钩子

在Jiess的setup（Jiess基础组件setup和Jiess组件setup）中，均有以下钩子：

onBeforeMount

• 类型 Function
• 详细 页面准备开始渲染

onMounted

• 类型 Function
• 详细 页面首次渲染完毕

onBeforeUpdate

• 类型 Function
• 详细 组件开始更新之前

onUpdated

• 类型 Function
• 详细 组件重新更新完成

onBeforeUnmount

• 类型 Function
• 详细 组件卸载之前触发，可以清除页面中的循环器和计时器

生命周期钩子的使用

生命周期钩子是暴露于Jiess上下文中的方法，直接通过上下文调用即可

function setup() {
	// 生命周期钩子接收一个回调函数作为参数
	this.onMounted(() => {
		console.log('这是mounted钩子')
	});
}