vue3 学习之路

一、父子组件之间值传递

<Menu title="tiltle" :list="[1,2]"></Menu>

//定义接收类型
type Props = {
  title?: String;
  list?: number[];
};
//接收父组件传递过来的值
//defineProps<Props>();
//接收父组件传递的值，并且可以赋默认值
withDefaults(defineProps<Props>(), {
  title: "景云",
  list: () => [2, 34],
});

//点击事件 defineEmits 给父组件传递值
const list = reactive<number>([1, 2, 3]);
const emits = defineEmits(["getList"]);
const clickTap = () => {
  emits("getList", list);
};


const edit = () => {
  console.log("执行了子组件的方法");
};
const flag = ref<boolean>(false);

// 父组件获取子组件的某个字段或者值，对父组件暴露出去值或者函数
defineExpose({
  edit,
  flag,
});

//父组件
<Menu @getList="getList" ref="menus"></Menu>

const menus = ref(null);
const changeChild = () => {
  menus.value.flag = !menus.value.flag;
  menus.value.edit();
};