vue export default常用结构

以下是一个常用的Vue export default函数的结构示例：

export default {
  name: "ComponentName",
  components: {
    // 注册子组件
    ChildComponent,
  },
  props: {
    // 定义父组件传递的属性
    prop1: {
      type: String,
      default: "default value",
    },
    prop2: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      // 定义组件内部的数据
      message: "Hello, Vue!",
    };
  },
  computed: {
    // 计算属性
    fullName() {
      return this.firstName + " " + this.lastName;
    },
  },
  methods: {
    // 定义组件内部的方法
    handleClick() {
      alert("Button clicked!");
    },
  },
  created() {
    // 组件创建时执行的逻辑
    console.log("Component created");
  },
  mounted() {
    // 组件挂载到DOM后执行的逻辑
    console.log("Component mounted");
  },
};