vue之组件

什么是组件

组件是Vue中的核心概念之一，指一种具有特定功能和行为的可重用的代码单元，它是构建用户界面的可重用模块。
简单来说一个组件也可以看作是一个封装的对象，它具有对应的属性和方法，提供给外部调用。
每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

组件的引用

1.创建组件
如下新建一个HelloWord.vue:

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

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

<style>
/* 可选：组件样式 */
h1 {
  color: blue;
}
</style>

2.注册组件
在Vue应用的入口文件（通常是main.js）中，注册全局组件：

import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';

Vue.component('HelloWorld', HelloWorld);

3.使用组件
在需要使用HelloWorld组件的地方，直接在模板中使用<HelloWorld></HelloWorld>：

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

<script>
// ...
</script>

组件之间的传值（props ，$emit）

1.父组件向子组件传递消息：通过在子组件上绑定 props，然后在父组件中通过 v-bind 绑定相应的数据来传递数据。

父组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent :childMessage="message" />
  </div>
</template>

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

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

子组件：

<template>
  <div>
    <h2>{{ childMessage }}</h2>
  </div>
</template>

<script>
export default {
  props: ['childMessage'],
};
</script>

父组件通过:childMessage="message"将message的值传递给了子组件的childMessage属性，子组件就可以在自己的模板中使用这个属性。可得如下结果：

2.子组件向父组件传递消息：通过$emit方法触发一个自定义事件，并传递消息给父组件，父组件通过监听这个事件来获取消息。
父组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent @customEvent="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data;
    },
  },
};
</script>

子组件：

<template>
  <div>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>

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

子组件通过this.$emit(‘customEvent’, ‘Hello from child component!’)触发了名为customEvent的自定义事件，并传递了一条消息给父组件。父组件通过@customEvent="handleCustomEvent"监听这个自定义事件，并在handleCustomEvent方法中接收消息并更新message的值。可得如下结果（点击按钮后得到子组件的消息）：