vue2和vue3的组件化开发demo

Vue 2 和 Vue 3 的组件化开发文档和演示示例。以下是详细的说明和代码实现：

---

Vue 2 组件化开发文档

1. 组件化开发概述

Vue 2 使用 .vue 文件来定义单文件组件（Single File Components, SFC），每个组件包含模板（template）、脚本（script）和样式（style）三部分。

2. 组件结构

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: "Default Content"
    }
  }
};
</script>

<style scoped>
.my-component {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}
</style>

3. 使用组件

在父组件中注册并使用子组件：

<template>
  <div id="app">
    <my-component :title="'Hello Vue 2'" content="This is a Vue 2 component"></my-component>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    MyComponent
  }
};
</script>

4. 生命周期钩子

Vue 2 提供了生命周期钩子，如 created、mounted 等：

export default {
  name: "MyComponent",
  props: {
    title: String
  },
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log("Component created");
  },
  mounted() {
    console.log("Component mounted");
  }
};

5. 事件通信

通过 $emit 向父组件传递事件：

<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  name ":MyButton",
  methods: {
    handleClick() {
      this.$emit("clicked");
    }
  }
};
</script>

在父组件中监听事件：

<template>
  <div>
    <my-button @clicked="handleClick"></my-button>
  </div>
</template>

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

export default {
  components: {
    MyButton
  },
  methods: {
    handleClick() {
      console.log("Button clicked");
    }
  }
};
</script>

---

Vue  3件化开发文档

1. 组件化开发概述

Vue 3 采用 Composition API，提供更灵活的逻辑复用方式。组件结构仍然基于 .vue 文件。

####2. 组件结构

<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "MyComponent",
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: "Default Content"
    }
  }
});
</script>

<style scoped>
.my-component  {
 border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}
</style>

3. 使用组件在

父组件中注册并使用子组件：

<template>
  <div id="app">
    <my-component :title="'Hello Vue 3'" content="This is a Vue 3 component"></my-component>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import MyComponent from './components/MyComponent.vue';

export default defineComponent({
  name: "App",
  components: {
    MyComponent
  }
});
</script>

4. Composition API

使用 setup 函数处理逻辑：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "MyCounter",
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
});
</script>

5. 事件通信

通过 emit 向父组件传递事件：

<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
import { defineComponent, emit } from "vue";

export default defineComponent({
  name: "MyButton",
  setup(props, { emit }) {
    function handleClick() {
      emit("clicked");
    }

    return {
      handleClick
    };
  }
});
</script>

在父组件中监听事件：

<template>
  <div>
    <my-button @clicked="handleClick"></my-button>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import MyButton from './components/MyButton.vue';

export default defineComponent({
  name: "App",
  components: {
    MyButton
  },
  methods: {
    handleClick() {
      console.log("Button clicked");
    }
  }
});
</script>

---

演示项目结构

文件结构

vue2-demo/
├── src/
│   ├── components/
│   │   └── MyComponent.vue
│   ├── App.vue
│   └── main.js
vue3-demo/
├── src/
│   ├── components/
│   │   └── MyComponent.vue
│   ├── App.vue
│   └── main.js

Vue 2 项目入口文件 (main.js)

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

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount('#app');

Vue 3 项目入口文件 (main.js)

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

---

总结

• Vue 2 使用 Options API，结构清晰，适合简单项目。
• Vue 3 使用 Composition API，逻辑复用更灵活，适合复杂项目。

你可以根据需求选择合适的 Vue 版本进行开发。