组件起步

自定义css

在利用Vue框架开发微信小程序时，开发者可能会遇到一些特定的挑战。例如微信小程序默认设置并不支持css样式的自动合并， 这给css样式的自定义带来了一定的困难。此外，Vue想要获取组件传入的style和class属性也存在一定的难度。 为了解决这一问题，通常的做法是引入custom-style和custom-class属性。然而，这些属性的名称较长，使用起来不够便捷。 为了简化开发流程，提高编码效率，这里对这些属性进行了缩写，分别使用*style和*class来替代。

<template>
  <your-component *style="width: 100px; height: 100px;"></your-component>
  <your-component *class="className component"></your-component>
</template>

回调函数

为了提供更灵活的组件行为控制和扩展能力，这里引入了回调函数callback机制。这一设计允许开发者通过控制回调函数的返回值直接影响组件的行为，从而实现更高级的交互逻辑。

• payload 回调参数

为了使回调函数能够根据当前的上下文做出反应，这里设计了一个特殊参数payload，它将在回调被触发时原样传递给回调函数。

<template>
  <your-component :callback="callback" :payload="payload"></your-component>
</template>

<script setup>
	let payload = ref({
		key1: 1,
		key2: 2
	});
	let callback = function(payload){
		// 具体的组件的回调参数可能不一样, 但是一般都会至少有payload参数
		
		// 通常情况下回调函数会在组件的默认行为前运行
		// 如果这里返回了false, 则会终止后续的默认行为
		return false;
	}
</script>