Vue组件基础

组件基础

组件是Vue.js中可复用的UI元素。组件可以被导入到其他组件中，也可以被注册为全局组件。组件通常由一个模板、一个脚本和一个样式表组成。

组件的创建

组件可以通过两种方式创建：

• 通过<template>标签：

<template>
  <div>
    <h1>组件标题</h1>
    <p>组件内容</p>
  </div>
</template>

• 通过JavaScript代码：

const MyComponent = {
  template: `
    <div>
      <h1>组件标题</h1>
      <p>组件内容</p>
    </div>
  `
};

组件的使用

组件可以通过两种方式使用：

• 通过<component>标签：

<component v-bind:is="MyComponent"></component>

• 通过JavaScript代码：

Vue.component('MyComponent', MyComponent);

new Vue({
  el: '#app',
  components: {
    MyComponent
  }
});

组件的生命周期

组件的生命周期分为以下几个阶段：

• beforeCreate：组件实例被创建之前。
• created：组件实例被创建之后。
• beforeMount：组件实例被挂载到DOM之前。
• mounted：组件实例被挂载到DOM之后。
• beforeUpdate：组件实例被更新之前。
• updated：组件实例被更新之后。
• beforeDestroy：组件实例被销毁之前。
• destroyed：组件实例被销毁之后。

组件通信

组件之间可以通过以下几种方式通信：

• props：父组件向子组件传递数据。
• computed：子组件从父组件获取数据。
• methods：子组件向父组件发送事件。
• custom events：组件之间发送自定义事件。
• slots：组件之间共享内容。

组件自定义事件

组件可以通过$emit方法触发自定义事件。自定义事件可以通过v-on指令侦听。

<component v-on:my-event="handleMyEvent"></component>

export default {
  methods: {
    handleMyEvent(data) {
      // 处理自定义事件
    }
  }
};

组件插槽

组件可以通过<slot>标签共享内容。<slot>标签可以被子组件使用。

<component>
  <slot name="header"></slot>
  <slot name="content"></slot>
  <slot name="footer"></slot>
</component>

<template>
  <component>
    <template v-slot:header>
      <h1>组件标题</h1>
    </template>
    <template v-slot:content>
      <p>组件内容</p>
    </template>
    <template v-slot:footer>
      <p>组件页脚</p>
    </template>
  </component>
</template>

组件作用域

组件的作用域是独立的。这意味着父组件无法访问子组件的变量和方法，反之亦然。

<component>
  <p>{{ message }}</p>
</component>

<template>
  <component>
    <template v-slot:content>
      <p>{{ message }}</p>
    </template>
  </component>
</template>

在上面的示例中，父组件和子组件都有一个名为message的变量。但是，父组件无法访问子组件的message变量，反之亦然。

组件props

props是父组件向子组件传递数据的方式。props是一个对象，它包含父组件要传递给子组件的数据。

<component v-bind:message="message"></component>

export default {
  props: ['message']
};

组件computed

computed是子组件从父组件获取数据的方式。computed是一个函数，它返回父组件传递给子组件的数据。

<p>{{ message }}</p>

export default {
  computed: {
    message() {
      return this.$props.message;
    }
  }
};

组件methods

methods是子组件向父组件发送事件的方式。methods是一个对象，它包含子组件要发送给父组件的事件。

<component v-on:my-event="handleMyEvent"></component>

export default {
  methods: {
    handleMyEvent() {
      this.$emit('my-event');
    }
  }
};

组件watch

watch是子组件监听父组件数据的变化。watch是一个对象，它包含子组件要监听的父组件的数据。

<p>{{ message }}</p>

export default {
  watch: {
    message(newValue, oldValue) {
      // 当message数据发生变化时执行此函数
    }
  }
};

总结

Vue组件是可复用的UI元素。组件可以被导入到其他组件中，也可以被注册为全局组件。组件通常由一个模板、一个脚本和一个样式表组成。组件可以通过<component>标签或JavaScript代码使用。组件之间可以通过props、computed、methods、custom events和slots通信。组件的作用域是独立的。父组件无法访问子组件的变量和方法，反之亦然。