【Vue】-组件开发

Vue 组件开发指南

1. 创建基础组件

• 使用 Vue.component 或 <script setup> 来定义全局或局部组件。
• 示例：

  <template>
    <div class="example">
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ExampleComponent',
    props: {
      title: String,
      content: String
    }
  }
  </script>
  
  <style scoped>
  .example {
    border: 1px solid #ccc;
    padding: 16px;
    margin: 16px 0;
  }
  </style>
  

2. 使用 Props 传递数据

• 父组件通过 props 向子组件传递数据。
• 示例：

  <!-- 父组件 -->
  <template>
    <div>
      <ExampleComponent :title="pageTitle" :content="pageContent" />
    </div>
  </template>
  
  <script>
  import ExampleComponent from './ExampleComponent.vue';
  
  export default {
    components: {
      ExampleComponent
    },
    data() {
      return {
        pageTitle: '欢迎来到我的页面',
        pageContent: '这是一个示例内容。'
      };
    }
  }
  </script>
  

3. 使用 Events 进行通信

• 子组件通过 $emit 触发事件，父组件监听这些事件。
• 示例：

  <!-- 子组件 -->
  <template>
    <button @click="handleClick">点击我</button>
  </template>
  
  <script>
  export default {
    methods: {
      handleClick() {
        this.$emit('custom-event', '这是一个自定义事件');
      }
    }
  }
  </script>
  

  <!-- 父组件 -->
  <template>
    <div>
      <ChildComponent @custom-event="handleCustomEvent" />
    </div>
  </template>

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

  export default {
    components: {
      ChildComponent
    },
    methods: {
      handleCustomEvent(message) {
        console.log(message);
      }
    }
  }
  </script>

4. 使用 Slots 实现内容分发

• 通过 slot 可以在组件中插入动态内容。
• 示例：

  <!-- 子组件 -->
  <template>
    <div class="card">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>
  
  <script>
  export default {
    name: 'CardComponent'
  }
  </script>
  
  <style scoped>
  .card {
    border: 1px solid #ccc;
    padding: 16px;
    margin: 16px 0;
  }
  </style>
  

  <!-- 父组件 -->
  <template>
    <div>
      <CardComponent>
        <template #header>
          <h1>标题</h1>
        </template>
        <p>这是主要内容。</p>
        <template #footer>
          <button>按钮</button>
        </template>
      </CardComponent>
    </div>
  </template>

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

  export default {
    components: {
      CardComponent
    }
  }
  </script>

5. 使用 Vuex 进行状态管理

• 对于复杂的应用，可以使用 Vuex 来管理应用的状态。

• 安装 Vuex：

  npm install vuex --save
  

• 示例：

  // store.js
  import Vue from 'vue';
  import Vuex from 'vuex';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    },
    actions: {
      increment({ commit }) {
        commit('increment');
      }
    },
    getters: {
      count: state => state.count
    }
  });
  

  <!-- App.vue -->
  <template>
    <div>
      <p>当前计数: {{ count }}</p>
      <button @click="increment">增加</button>
    </div>
  </template>

  <script>
  import { mapState, mapActions } from 'vuex';

  export default {
    computed: {
      ...mapState(['count'])
    },
    methods: {
      ...mapActions(['increment'])
    }
  }
  </script>

6. 使用 Router 进行路由管理

• 对于多页面应用，可以使用 Vue Router 进行路由管理。

• 安装 Vue Router：

  npm install vue-router --save
  

• 示例：

  // router.js
  import Vue from 'vue';
  import Router from 'vue-router';
  import Home from './components/Home.vue';
  import About from './components/About.vue';
  
  Vue.use(Router);
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      },
      {
        path: '/about',
        name: 'about',
        component: About
      }
    ]
  });
  

  <!-- App.vue -->
  <template>
    <div id="app">
      <nav>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
      </nav>
      <router-view></router-view>
    </div>
  </template>

  <script>
  import router from './router';

  export default {
    router
  }
  </script>

以上是 Vue 组件开发的最简单的一个例子