当前位置：首页 > VUE

vue实现组件开发创建

2026-01-23 02:02:28VUE

Vue 组件开发创建步骤

安装 Vue CLI
确保已安装 Node.js 和 npm，通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli

创建 Vue 项目
使用 Vue CLI 创建新项目，选择默认配置或手动配置：

vue create my-project

项目结构
创建完成后，项目目录结构通常包含：

src/components：存放自定义组件
src/App.vue：根组件
src/main.js：入口文件

编写组件

单文件组件结构
在 src/components 下创建 .vue 文件，例如 MyComponent.vue，包含三部分：

vue实现组件开发创建

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

<style scoped>
div {
  color: blue;
}
</style>

注册组件
在父组件中引入并注册：

<template>
  <MyComponent />
</template>

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

export default {
  components: {
    MyComponent
  }
};
</script>

组件通信

Props 传递数据
父组件通过 props 向子组件传递数据：

<!-- 父组件 -->
<template>
  <ChildComponent :msg="parentMessage" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Data from parent'
    };
  }
};
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>{{ msg }}</div>
</template>

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

自定义事件通信
子组件通过 $emit 触发事件，父组件监听：

vue实现组件开发创建

<!-- 子组件 -->
<template>
  <button @click="notifyParent">Click Me</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('child-event', 'Data from child');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @child-event="handleEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleEvent(data) {
      console.log(data); // 输出 "Data from child"
    }
  }
};
</script>

生命周期钩子

常用生命周期钩子示例：

<script>
export default {
  created() {
    console.log('组件实例创建完成');
  },
  mounted() {
    console.log('DOM 挂载完成');
  },
  beforeUnmount() {
    console.log('组件卸载前');
  }
};
</script>

进阶用法

插槽（Slots）
父组件向子组件插入内容：

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    <p>Default Content</p>
  </ChildComponent>
</template>

动态组件
通过 <component :is> 切换组件：

<template>
  <component :is="currentComponent"></component>
  <button @click="toggleComponent">Toggle</button>
</template>

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

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