不利用现有UI库进行vue组件开发（实际项目中很少这么开发╮(╯▽╰)╭）

以下为不利用现有UI库（element，ant等）进行组件的创建开发，写作业可以用，实际项目中很少从零进行组件开发。╮(╯▽╰)╭

1. 创建 Vue.js 组件

Vue.js 组件通常由三个部分组成：模板（<template>）、脚本（<script>）和样式（<style>）。下面是一个简单的 Vue.js 组件示例：

示例：创建一个简单的 Vue.js 组件

<template>
  <div class="greeting">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  name: "GreetingComponent",
  data() {
    return {
      message: "Hello, Vue.js!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "Welcome to Vue.js Component Development!";
    }
  }
};
</script>

<style scoped>
.greeting {
  text-align: center;
  margin-top: 50px;
}

.greeting h1 {
  color: #42b983;
}

.greeting button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}

.greeting button:hover {
  background-color: #35495e;
}
</style>

2. 组件注册

在 Vue.js 中，组件可以在全局或局部注册。

全局注册

在 main.js 文件中全局注册组件：

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

Vue.component('GreetingComponent', GreetingComponent);

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

局部注册

在单个组件中局部注册组件：

<template>
  <div id="app">
    <GreetingComponent />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    GreetingComponent
  }
};
</script>

3. 组件通信

Vue.js 提供了多种方式来实现组件之间的通信，包括 props 和自定义事件。

使用 Props 传递数据

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

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

使用自定义事件

子组件向父组件发送事件：

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessageToParent">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendMessageToParent() {
      this.$emit('child-event', 'Hello from Child!');
    }
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @child-event="handleChildEvent" />
    <p>{{ childMessage }}</p>
  </div>
</template>

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

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

4. 组件插槽

Vue.js 的插槽（slots）允许你在组件中插入内容。

默认插槽

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <p>This is content from the parent component.</p>
    </ChildComponent>
  </div>
</template>

具名插槽

<!-- ChildComponent.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>Header Content</h1>
      </template>
      <p>Main Content</p>
      <template v-slot:footer>
        <p>Footer Content</p>
      </template>
    </ChildComponent>
  </div>
</template>