参考代码
import { defineComponent, PropType, h, computed, ref, watch } from 'vue';
import type { Reactive, Ref } from 'vue';
import styles from '../scss/child.module.scss';
import '../scss/child.scss'; //这引入的样式是全局的,会影响其他页面其他组件
// 函数局部组件实现
const myDiv = (param1: Ref, param2: Reactive<{ num: number }>) => {
return (
<div>
<div>{param1.value}</div>
<div>{param2.num}</div>
</div>
);
};
export default defineComponent({
props: {},
setup(props) {
// ref 数据传入子组件
const myData1 = ref<number>(23);
// reactive 数据传入子组件
const myObj: Reactive<{ num: number }> = reactive({
num: 1
});
function myClick() {
console.log('myClick');
myData1.value++;
myObj.num++;
}
const mycls = {
color: 'red'
};
return () => (
<div>
{/* 动态style使用方式 */}
<div class="abc" style={mycls}>
sdkfjskf
</div>
<div>{myDiv(myData1, myObj)}</div>
{/* ref value读取方式 动态class方式 */}
{/* 局部样式module引入的,只能这样用才能生效了 */}
<div class={styles.red}>{myData1.value}</div>
{/* reactive对象数据读取方式 */}
<div>{myObj.num}</div>
<div>
{/* 事件触发方式 */}
<button onClick={() => myClick()}>btn</button>
</div>
{/* class 下面这样写想直接生效,那这个class得全局的 */}
<div class="mycls">sldfjsklfd</div>
<div className="mycls">sldfjsklfd</div>
<div className="mycls-green">sldfjsklfd</div>
</div>
);
}
});
global 样式注意事项
需要在局部样式中使用global()才能生效