[JavaScript知识库]vue3 使用经验

.vue 文件配置

<template>
	<div ref="listref"> //搭配第一个script
		<Table />	// 第二个script
	</div>
</template>

<script lang="ts">
impoort { getCurrentInstance, reactive, ref } from 'vue'	//引入vue3方法
import { useStore } from '/@/store/index';
import router from '/@/router';				//	路由跳转
exportdefault{
	name:"",	
	components:{},							// 	注册组件
	props:{},								// 	组件获取值
	setup(props,{emit}){					// props可以调用props里面的值 emit子传父
		const { proxy } = getCurrentInstance() as any;	//	可以查看$el 等等
		const store = useStore();			//	可以理解为vuex
		const state = reactive({});			//	存放变量
		const listref = ref() 				//	拿到ref
		const list = () => {				//	假设定义的方法
			emit('name',a)					//	调用方法改变 里面传递 名字参数没变
		}				
		return {	//方法、引入的组件要return出去
				listref ，
				list,
				...toRefs(state),
		};
	}
}
</sctipt>

//这种对比上面这种不用return 可以直接定义就使用 
<script setup lang="ts">
import {  reactive, ref } from 'vue'			//引入vue3方法
import	Table from "./component/table.vue"		//引入组件 不用注册可以直接使用
const emits = defineEmits(["update"]);			//调用emits
const props = defineProps({						//props 组件接收
});
const a = ref() 								//ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）
const b = reactive({							//监听复杂类型的变化可以使用reactive函数
	name: "",
	age: [],
	obj: {}
}) 
const list = () => {							//定义的方法
	emits('定义父组件调用名字',list) 			//list子组件返回值	emits子传父方法
}   	

</sctipt>

<style scoped lang="scss">
</style>