Vue组件的写法汇总

1. 简介

在Vue中，组件被认为是应用程序的基础构建块，是Vue应用程序中最为重要的部分之一。此篇文章将详细讲解Vue组件的编写方式，通过学习组件的写法方式，你可以更好地组织应用程序代码，同时也可以更加方便地复用相同的代码。

2. 组件基础

在Vue中，定义一个组件非常简单。只需要通过Vue.component()函数定义组件，并通过props对象传递数据。

下面是一个简单的组件示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="onClick">点击</button>
  </div>
</template>

<script>
Vue.component('my-component', {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  methods: {
    onClick() {
      console.log('按钮被点击');
    }
  }
});
</script>

上面的示例中，我们定义了一个名为my-component的组件，它包含一个标题和一个按钮，通过props对象传递标题数据。在按钮被点击时，会在控制台输出一条消息。

3. 组件模板

Vue组件支持基于模板的语法，也就是使用模板来定义组件的UI，相比于直接编写HTML，使用模板可以大大提高代码的可读性和可维护性。

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <button @click="onClick">点击</button>
  </div>
</template>

上面的示例中，我们定义了一个my-component的组件模板，它包含了一个标题、一段文本内容和一个按钮。

4. 组件数据

Vue组件支持通过data函数定义组件的数据属性，这些数据属性也可以在模板中使用。在组件实例化时，Vue会调用data函数获取组件的数据属性。

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <button @click="onClick">点击</button>
  </div>
</template>

<script>
Vue.component('my-component', {
  data() {
    return {
      title: '默认标题',
      content: '默认内容'
    }
  },
  methods: {
    onClick() {
      console.log('按钮被点击');
    }
  }
});
</script>

上面的示例中，我们定义了一个my-component的组件，数据属性包括title和content，分别用于在模板中显示标题和内容。如果在组件引入时没有传入标题和内容，则使用默认值。

5. 父子组件通信

在Vue中，父组件和子组件之间的通信是非常重要的。可以通过props和$emit函数来实现父子组件之间的通信。

5.1 父组件向子组件传递数据

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
Vue.component('child-component', {
  props: {
    title: {
      type: String,
      required: true
    }
  }
});
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component :title="myTitle"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myTitle: '父组件传递的标题'
    }
  }
}
</script>

上面的示例中，父组件App通过props向子组件ChildComponent传递title属性。子组件接收title属性后，在模板中显示了标题。由于title在子组件中使用了required: true，因此也保证了父组件必须传递正确的title属性。

5.2 子组件向父组件传递数据

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="$emit('on-click')">点击</button>
  </div>
</template>

<script>
Vue.component('child-component', {
  props: {
    title: {
      type: String,
      required: true
    }
  }
});
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component :title="myTitle" @on-click="onClick"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myTitle: '父组件传递的标题'
    }
  },
  methods: {
    onClick() {
      console.log('子组件的按钮被点击');
    }
  }
}
</script>

上面的示例中，子组件ChildComponent的按钮被点击后，通过$emit('on-click')触发了onClick事件。父组件则监听了@on-click事件，一旦子组件触发了onClick事件，会立即执行onClick函数，从而实现了子组件向父组件的数据传递。