基本使用

创建新项目

create vue3

npm create vue@latest

setup语法糖

defineProps 接收参数

// 接收由父组件传递的数据
const props = defineProps({
    // 属性配置
    属性名: {
      // 该属性值的类型
      type: [String, Number, ...],或则type: Boolean,
      // 该属性的默认值
      default: true,
    },
  ············
})

defineEmits 自定义事件

// 自定义事件
const emit = defineEmits(["自定义事件名","自定义事件名",·······]);

// 示例事件
const click = ()=>{
  console.log("该事件由页面元素点击触发");

  // 添加自定义事件
  emit("自定义事件名", '携带参数(可以是数组，字符串，对象，函数等等)')
}

defineExpose 暴露属性及方法

// 子组件对父组件暴露的数据以及方法
// 属性
const state = reactive({
  name: "defineExpose",
  message: "使用成功",
});

// 示例事件
const click = () => {
  console.log("事件触发");
};

defineExpose({
  // 暴露的属性
  name: state.name,
  message: state.message,
  // 暴露的方法
  click,
});

关键提示

不需要导入即可使用 defineProps、defineEmits、defineExpose。

本地静态访问链接 （用于读取静态资源）

export const getAssetsFile = (url: string) => {
  return new URL(`@/assets/icon/${url}`, import.meta.url).href; // 只能在本文件的js中拼接url前面的路径，`@/assets/icon/`，其它页面使用只能是名称加后缀，url不能为： '/icon/t.png', 正确的是't.png'
};