写一个vue的简单组件

好的，下面是一个简单的 Vue 组件示例，实现了一个计数器：

<template>
  <div>
    <button @click="increment">+</button>
    <span>{{ count }}</span>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
};
</script>

在这个组件中，我们使用了 Vue 的模板语法来定义组件的结构，包括三个按钮和一个数字展示区域。同时，在 `<script>` 标签中，我们定义了组件的行为和数据，包括 `count` 计数器变量，和两个方法 `increment` 和 `decrement` 来分别实现加一和减一的功能。最后，我们导出这个组件，以便其他地方可以引用它。

相关问题

写一个vue的函数组件

当然，这里我为您提供一个简单的 Vue 函数组件示例代码：

<template>
  <div class="hello-world">
    <h1>{{ greeting }}</h1>
    <button @click="updateGreeting">Say Hello</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    name: {
      type: String,
      default: 'World'
    }
  },
  data() {
    return {
      greeting: `Hello, ${this.name}!`
    }
  },
  methods: {
    updateGreeting() {
      this.greeting = `Hi, ${this.name}!`
    }
  }
}
</script>

此示例代码展示了一个名为 `HelloWorld` 的函数式 Vue 组件，该组件接受一个 `name` 属性作为输入。组件中包含一个 `greeting` 数据属性和一个 `updateGreeting` 方法。当用户点击按钮时，`greeting` 属性的值将从“Hello，World！”更改为“Hi，World！”。

请注意，Vue 3 已经支持函数式组件，而 Vue 2 中需要使用 Vue 函数 API 和 Suspense 才能实现函数式组件。

写一个vue 自定义全局组件的案例

以下是一个基于Vue的自定义全局组件案例：

在 Vue 中，可以使用Vue.component()方法来创建一个全局可用的组件。这个方法有两个参数：组件名称和组件选项对象。下面我们来看一个简单的例子：

1. 首先在项目中创建一个自定义组件:

Vue.component('custom-component', {
  template: '<div>{{ message }}</div>',    //定义组件的模板
  props: ['message']                       //定义组件的props数据
})

2. 然后在应用中即可使用该组件

<custom-component message="Hello World"></custom-component>

在这个例子中，我们创建了一个名为'custom-component'的全局组件，定义了一个message props数据和一个简单的模板。然后，在应用中通过标签的形式来使用这个组件，同时传递了一个字符串'Hello World'给message props数据。

这个自定义组件会生成一个<div>标签，内容是'Hello World'。