.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>