Vue.js 组件

在 Vue.js 中，组件是构建用户界面的基本单位。通过将页面拆分为多个组件，可以更好地管理和维护代码，提高代码的复用性和可维护性。Vue.js 的组件系统使得开发者可以轻松地将页面分解为独立的、可复用的组件，然后组合这些组件来构建复杂的用户界面。

创建一个 Vue.js 组件

要创建一个 Vue.js 组件，首先需要定义一个 Vue 实例，然后将组件的选项传递给 Vue 实例的 components 属性。组件选项包括组件的模板、数据、方法等。

// www.javascriptcn.com code example
<template>
  <div>
    <h1>Hello, Vue.js Component!</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Welcome to my Vue.js component!'
    }
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为 MyComponent 的 Vue 组件，包含一个简单的模板和一个数据属性 message，以及一个方法 greet。在模板中，我们使用双大括号语法 {{ message }} 来显示数据属性的值，当调用 greet 方法时，会弹出一个包含 message 的提示框。

注册和使用组件

要在应用中使用一个组件，首先需要将其注册到 Vue 实例中。注册组件的方式有两种：全局注册和局部注册。

全局注册组件

全局注册组件是将组件注册到 Vue 实例中的方式，使得该组件在整个应用中都可以被使用。

import Vue from 'vue';
import MyComponent from './MyComponent.vue';

Vue.component('my-component', MyComponent);

在上面的代码中，我们将 MyComponent 组件注册为 my-component，这样在应用中就可以使用 <my-component> 标签来引入该组件。

局部注册组件

局部注册组件是将组件注册到另一个组件中的方式，使得该组件只能在父组件中被使用。

// www.javascriptcn.com code example
<template>
  <div>
    <my-component></my-component>
  </div>
</template>

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

export default {
  components: {
    'my-component': MyComponent
  }
}
</script>

在上面的代码中，我们在父组件中注册了 MyComponent 组件，然后在模板中使用 <my-component> 标签来引入该组件。

组件通信

在 Vue.js 中，组件之间的通信可以通过 props 和 events 来实现。props 是从父组件向子组件传递数据，而 events 是从子组件向父组件传递数据。

使用 props 传递数据

// www.javascriptcn.com code example
<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  data() {
    return {
      parentMessage: 'Hello from parent component!'
    }
  },
  components: {
    'child-component': ChildComponent
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在上面的代码中，我们在父组件中使用 v-bind 指令将 parentMessage 数据传递给子组件，并在子组件中通过 props 属性声明接收的数据。

使用 events 传递数据

// www.javascriptcn.com code example
<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('send-data', 'Hello from child component!');
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component @send-data="receiveDataFromChild"></child-component>
  </div>
</template>

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

export default {
  methods: {
    receiveDataFromChild(data) {
      alert(data);
    }
  },
  components: {
    'child-component': ChildComponent
  }
}
</script>

在上面的代码中，我们在子组件中通过 $emit 方法触发一个名为 send-data 的事件，并传递数据给父组件，然后在父组件中使用 @send-data 监听事件，并在回调函数中接收数据。

这就是 Vue.js 组件的基本用法和通信方式，通过组件化开发，可以更好地组织和管理代码，提高开发效率和代码质量。