Vue 2 export default {}多种语法格式

在Vue 2里，export default {} 用于导出一个Vue组件选项对象，其内部存在多种语法格式，以下为你详细介绍：

1. 基本选项式组件

这是最常见的格式，包含 data、methods、computed、watch 等选项。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">修改消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    changeMessage() {
      this.message = '消息已修改';
    }
  }
};
</script>

在上述代码里，data 函数返回组件的数据对象，methods 包含组件的方法。

2. 生命周期钩子函数

Vue 2提供了多个生命周期钩子函数，你可以在组件选项对象中定义它们。

<template>
  <div></div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('组件实例初始化之前');
  },
  created() {
    console.log('组件实例已经创建完成');
  },
  beforeMount() {
    console.log('模板编译/挂载之前');
  },
  mounted() {
    console.log('模板编译/挂载之后');
  },
  beforeUpdate() {
    console.log('数据更新之前');
  },
  updated() {
    console.log('数据更新之后');
  },
  beforeDestroy() {
    console.log('组件销毁之前');
  },
  destroyed() {
    console.log('组件销毁之后');
  }
};
</script>

这里列举了组件不同生命周期阶段的钩子函数，可在特定阶段执行相应操作。

3. 组件选项

可以在组件中使用 components 选项注册子组件，使用 props 接收父组件传递的数据。

<template>
  <div>
    <ChildComponent :child-message="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: '来自父组件的消息'
    };
  }
};
</script>

在该示例中，components 选项注册了 ChildComponent 子组件，data 提供了传递给子组件的数据。

4. 混合（Mixins）

使用 mixins 选项可以将多个组件共享的选项合并到当前组件中。

// mixin.js
export const myMixin = {
  data() {
    return {
      mixinData: '这是混合数据'
    };
  },
  methods: {
    mixinMethod() {
      console.log('这是混合方法');
    }
  }
};

// MyComponent.vue
<template>
  <div></div>
</template>

<script>
import { myMixin } from './mixin.js';

export default {
  mixins: [myMixin],
  created() {
    console.log(this.mixinData);
    this.mixinMethod();
  }
};
</script>

此例中，mixins 选项引入了 myMixin 混合对象，让组件能够使用混合中的数据和方法。

5. 过滤器（Filters）

可以使用 filters 选项定义过滤器，对数据进行格式化。

<template>
  <div>
    <p>{{ message | capitalize }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    };
  },
  filters: {
    capitalize(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
};
</script>

在这个例子中，filters 选项定义了 capitalize 过滤器，用于将字符串首字母大写。

6. 自定义指令（Directives）

使用 directives 选项可以定义自定义指令。

<template>
  <div>
    <input v-focus />
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      }
    }
  }
};
</script>

这里的 directives 选项定义了 focus 自定义指令，在元素插入 DOM 后使其获得焦点。