vue实现自定义公共组件及提取公共的方法

下面我为您详细讲解“Vue 实现自定义公共组件及提取公共的方法”的完整攻略。

1. 自定义公共组件

1.1 创建与引入组件

Vue 框架提供了组件化的机制，用户可以通过自定义组件的方式进行开发。下面是一个简单的自定义组件的例子，我们可以创建一个 HelloWorld 组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    title: String,
    content: String
  }
}
</script>

在上面的代码中，我们定义了一个 HelloWorld 组件，并通过 props 传递数据。现在，我们需要将这个组件引入到我们的项目中，可以使用以下代码进行引入：

<template>
  <div>
    <HelloWorld title="Welcome" content="Hello World!" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

1.2 定制化组件样式

我们可以使用 scoped 特性来对组件内部的样式进行定制，如：

<template>
  <div>
    <h1 :style="{color: themeColor}">{{ title }}</h1>
    <p :style="{color: themeColor}">{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    title: String,
    content: String,
    themeColor: String
  }
}
</script>

<style scoped>
h1 { font-size: 24px; }
p { font-size: 16px; }
</style>

在上面的例子中，我们对组件内的 h1 和 p 元素进行了样式定制，并且使用了 props 中的 themeColor 属性来定义字体颜色。

2. 提取公共的方法

开发过程中，我们常常需要对一些公共方法进行抽象和定制化，以便于代码复用和维护。下面是一个提取公共方法的示例：

2.1 创建公共方法

我们可以在 src/utils 目录下创建一个公共方法文件夹，并在其中创建公共方法 formatDate.js：

export function formatDate (date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}-${month}-${day}`
}

2.2 引用公共方法

我们在需要使用这个公共方法的地方引入此文件，即可使用其中的方法：

<template>
  <div>
    <p>{{ formatTime }}</p>
  </div>
</template>

<script>
import { formatDate } from '@/utils/formatDate'

export default {
  name: 'App',
  computed: {
    formatTime() {
      const now = new Date()
      return formatDate(now)
    }
  }
}
</script>

在上面的例子中，我们通过 import { formatDate } from '@/utils/formatDate' 引入了公共方法文件夹中的 formatDate 方法，并在组件中使用它来格式化时间。

这就是Vue 实现自定义公共组件及提取公共方法的攻略，希望对您有所帮助！