关于vue.js组件开发

文章目录

前言
一、组件基础？
- 组件的概念：
- 组件的注册
- - 全局注册：
  - 局部注册：
二、组件的选项
- 1.模板（template）
- 2.数据（data）：
- 3.方法（methods）
- 4.生命周期钩子函数
三.组件间通信
- 父子组件通信
- - 父组件向子组件传递数据：
  - 子组件向父组件传递数据：
- 非父子组件通信：
插槽（Slots）
- 默认插槽：
- 具名插槽：
- 动态组件：
- 组件的样式
- - 内联样式：
  - CSS 类：
  - 作用域样式：
优化与注意事项
- 性能优化：
- 注意事项：

前言

Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。以下是关于 Vue.js 组件开发的详细介绍：

一、组件基础？

组件的概念：

组件是 Vue.js 应用程序的基本构建块，它是一种可复用的 Vue 实例，具有自己的模板、数据、方法和生命周期。可以将组件看作是一个独立的、自给自足的代码单元，用于实现特定的功能或界面部分。

组件的注册

全局注册：

使用Vue.component方法进行全局注册，这样注册的组件可以在整个 Vue 应用程序的任何地方使用。

Vue.component('my-component', {
  // 组件的选项
  template: '<div>这是一个全局注册的组件</div>'
});

局部注册：

在单个 Vue 实例或组件内部使用components选项进行局部注册，这样注册的组件只能在当前实例或组件的模板中使用。

new Vue({
  el: '#app',
  components: {
    'my-component': {
      // 组件的选项
      template: '<div>这是一个局部注册的组件</div>'
    }
  }
});

二、组件的选项

1.模板（template）

定义了组件的 HTML 结构，可以使用 Vue.js 的模板语法来绑定数据和添加交互逻辑。

template: '<div><h1>{{ title }}</h1><p>{{ message }}</p></div>'

2.数据（data）：

组件的数据是响应式的，当数据发生变化时，组件会自动更新。数据必须是一个函数，返回一个对象，以确保每个组件实例都有自己独立的数据副本。

代码如下（示例）：

data() {
  return {
    title: '组件标题',
    message: '组件内容'
  };
}

3.方法（methods）

定义了组件可以调用的函数，用于处理用户交互或执行其他逻辑。

methods: {
  handleClick() {
    alert('按钮被点击了');
  }
}

4.生命周期钩子函数

Vue.js 组件有多个生命周期钩子函数，如created、mounted、updated、destroyed等，可以在这些钩子函数中执行特定的操作，例如在created钩子函数中进行数据初始化，在mounted钩子函数中发送 AJAX 请求获取数据等。

三.组件间通信

父子组件通信

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

通过子组件的props选项来实现。父组件可以在子组件标签上通过属性绑定的方式传递数据，子组件通过props选项接收这些数据。

<!-- 父组件模板 -->
<template>
  <div>
    <child-component :parent-data="parentData"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '这是父组件传递给子组件的数据'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>接收来自父组件的数据：{{ parentData }}</p>
  </div>
</template>

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

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

通过自定义事件来实现。子组件可以使用$emit方法触发一个自定义事件，并传递数据，父组件在子组件标签上通过v-on指令监听这个自定义事件，并在事件处理函数中接收子组件传递的数据。

<!-- 子组件模板 -->
<template>
  <div>
    <button @click="sendDataToParent">点击传递数据给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const dataToSend = '这是子组件传递给父组件的数据';
      this.$emit('child-event', dataToSend);
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
    <p>接收来自子组件的数据：{{ receivedData }}</p>
  </div>
</template>

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

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

非父子组件通信：

可以使用 Vuex 状态管理模式来实现，也可以通过创建一个事件总线（Event Bus）来实现。

插槽（Slots）

默认插槽：

用于在组件中插入内容。在组件模板中使用标签定义插槽位置，父组件在使用子组件时，可以在子组件标签之间插入内容，这些内容将显示在子组件的插槽位置。

<!-- 子组件模板 -->
<template>
  <div>
    <h1>组件标题</h1>
    <slot>这是默认插槽的内容，如果父组件没有插入内容，将显示这里的文本。</slot>
  </div>
</template>

<!-- 父组件模板 -->
<template>
  <div>
    <my-component>
      <p>这是父组件插入到子组件默认插槽中的内容。</p>
    </my-component>
  </div>
</template>

具名插槽：

当一个组件需要多个插槽时，可以使用具名插槽。在标签上使用name属性指定插槽的名称，父组件在插入内容时，使用v-slot指令指定要插入的插槽名称。

<!-- 子组件模板 -->
<template>
  <div>
    <slot name="header">这是默认的头部插槽内容。</slot>
    <p>组件的主体内容。</p>
    <slot name="footer">这是默认的底部插槽内容。</slot>
  </div>
</template>

<!-- 父组件模板 -->
<template>
  <div>
    <my-component>
      <template v-slot:header>
        <h2>这是父组件插入到子组件头部插槽中的内容。</h2>
      </template>
      <template v-slot:footer>
        <p>这是父组件插入到子组件底部插槽中的内容。</p>
      </template>
    </my-component>
  </div>
</template>

动态组件：

可以使用标签的is属性来动态渲染不同的组件，根据数据的变化来切换显示的组件。

<template>
  <div>
    <button @click="changeComponent">切换组件</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    changeComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA'? 'ComponentB' : 'ComponentA';
    }
  }
};
</script>

组件的样式

内联样式：

可以在组件的模板中使用style属性来定义内联样式。

<template>
  <div style="background-color: lightblue; padding: 10px;">
    <p>这是一个具有内联样式的组件。</p>
  </div>
</template>

CSS 类：

可以在组件的模板中使用class属性来应用 CSS 类，然后在 CSS 文件中定义这些类的样式。

<template>
  <div class="my-component">
    <p>这是一个应用了CSS类的组件。</p>
  </div>
</template>

<style>
.my-component {
  background-color: lightgreen;
  padding: 10px;
}
</style>

作用域样式：

在单文件组件中，可以使用scoped属性来限定样式的作用域，使得组件的样式只应用于当前组件，不会影响到其他组件。

<template>
  <div class="my-component">
    <p>这是一个具有作用域样式的组件。</p>
  </div>
</template>

<style scoped>
.my-component {
  background-color: lightyellow;
  padding: 10px;
}
</style>