Vue3 组件常用API封装

目录结构：

 

1、插件：instance

import {
	ref,
	reactive,
	watch,
	computed,
	onMounted,
	getCurrentInstance
} from "vue";
export default function() {
	let {proxy} = getCurrentInstance();
	console.log(proxy);
	proxy.ref=ref
	proxy.reactive=reactive
	proxy.watch=watch
	proxy.computed=computed
	proxy.onMounted=onMounted
	return proxy
}

2、父组件：layout

<template>
    <div>
	    <filterC ref="filter" :count="count"  @save="commit"></filter
	    <button @click="plus">+</button>
	    <button @click="minu">-</button>
    </div>
</template>
<script setup>
	import filterC from "./filter.vue"
	import getInstance from "./instance.js"
	const that=getInstance()
	const count=that.ref(2)
	function commit(body){
		count.value++
		console.log(JSON.stringify(body));
	}
	function plus(){
		that.$refs.filter.plus(2,3)
	}
	function minu(){
		that.$refs.filter.minu(2)
	}
</script>

3、子组件filter:

<template>
	<h1>{{sum}}</h1>
	<h1>{{sum2}}</h1>
	<h2>{{porps.count}}</h2>
	<input v-model="body.name" placeholder="请输入用户名"/>
	<input v-model="body.password" placeholder="请输密码"/>
	<button @click="commit">确定<</button>
</template>

<script setup>
	import getInstance from "./instance.js"
	const porps=defineProps(["count"]);
	defineEmits(["save"]);
	defineExpose({plus,minu})
	let that = getInstance();
	const body = that.reactive({ name: "", password: "" });

	function commit() {
		that.$emit("save", body);
	}
	const sum=that.ref(0)
	const sum2 =that.computed(()=>{
		return sum.value*2
	})
	that.watch(sum,(nv,ov)=>{
		console.log(ov);
		console.log(nv);
	})
	that.watch(()=>porps.count,(nv,ov)=>{
		console.log(ov);
		console.log(nv);
	})
	function plus(a,b){
		sum.value+=a+b
	}
	function minu(a){
		sum.value=sum.value-2
	}
</script>

<style>
</style>