第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定

Vue3公共組件學(xué)習(xí)：從入門到實踐

標簽：
Vue.js
概述

Vue3公共组件学习涉及在项目中创建和复用组件，这些组件可以简化代码组织，提高开发效率和代码的可维护性。公共组件的创建包括环境搭建、编写代码和注册使用等步骤，确保组件的复用性和一致性。此外，公共组件还能通过传递属性和事件来实现更复杂的交互功能，进一步提升项目的开发效率和用户体验。

Vue3公共组件概述

在Vue3项目开发过程中，公共组件扮演着重要角色。公共组件是指在多个地方复用的组件，这种组件可以在整个项目中多次出现且具有相同的功能或外观。公共组件可以简化代码组织，减少重复代码，提高开发效率和代码的可维护性。例如，创建一个按钮组件可以避免在不同页面重复编写相同的功能代码：

<template>
  <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    text: {
      type: String,
      default: 'Click Me'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}
</style>
``

#### 什么是公共组件

公共组件是指在项目中可以复用的组件。这些组件可以在不同的页面或模块中共享，它们可以是按钮、表单、导航等。通过创建公共组件，可以确保代码的一致性和规范性，提升开发效率。

#### 公共组件的作用

1. **减少代码冗余**：公共组件可以避免代码重复编写。
2. **提高代码复用性**：公共组件可以在多个地方使用，提高代码的复用性。
3. **确保UI一致性**：公共组件确保不同页面或模块的样式和功能一致性。

#### 使用公共组件的好处

1. **提高开发效率**：开发人员不需要重复编写相同的代码，可以专注于业务逻辑。
2. **易于维护**：公共组件的修改会影响到所有使用该组件的地方，简化了维护工作。
3. **易于扩展**：公共组件可以方便地扩展功能，适应项目需求的变化。

### Vue3公共组件的创建

#### 准备工作：环境搭建

在开始创建公共组件之前，首先需要搭建完整的开发环境。以下步骤演示如何安装Vue CLI并创建一个新的Vue项目：

1. **安装Vue CLI**：
   ```bash
   npm install -g @vue/cli
  1. 创建新项目： 
    vue create my-vue-app
cd my-vue-app
  2. 安装必要的依赖： 
    npm install

创建公共组件的基本步骤

在Vue3中，创建公共组件的基本步骤如下：

  1. 初始化组件：
    创建一个新的文件夹来存放公共组件。例如，创建一个名为components的文件夹。 
    mkdir src/components

  2. 编写组件代码：
    在components文件夹中创建一个新的组件文件，例如MyButton.vue。

    touch src/components/MyButton.vue

    编写组件代码：

    <template>
 <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
 name: 'MyButton',
 props: {
   text: {
     type: String,
     default: 'Click Me'
   }
 },
 methods: {
   handleClick() {
     console.log('Button clicked');
   }
 }
}
</script>

<style scoped>
button {
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 background-color: #007bff;
 color: white;
 cursor: pointer;
}
</style>

  3. 注册并使用组件：
    在需要使用该组件的页面中注册并使用该组件。例如，在App.vue中使用MyButton。

    <template>
 <div id="app">
   <my-button text="Hello Vue"></my-button>
   <my-button text="Another Button"></my-button>
 </div>
</template>

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

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

<style>
#app {
 text-align: center;
 margin-top: 60px;
}
</style>

组件的属性与事件绑定

  1. 属性传递：
    在上面的MyButton组件中，通过props接收父组件传递的属性text。

    <script>
export default {
 name: 'MyButton',
 props: {
   text: {
     type: String,
     default: 'Click Me'
   }
 },
 methods: {
   handleClick() {
     console.log('Button clicked');
   }
 }
}
</script>
  2. 事件绑定：
    在模板中使用@click事件绑定来处理按钮点击事件。 
    <template>
 <button @click="handleClick">{{ text }}</button>
</template>

公共组件的复用

如何在项目中复用组件

公共组件可以通过在多个文件中引入并使用来实现在项目中的复用。例如，可以在多个页面中引入并使用MyButton组件。

  1. 在其他页面中引入组件：
    假设有另一个页面HomePage.vue，可以在该页面中引入并使用MyButton组件。

    <template>
 <div>
   <h1>Home Page</h1>
   <my-button text="Home Button"></my-button>
 </div>
</template>

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

export default {
 name: 'HomePage',
 components: {
   MyButton
 }
}
</script>
  2. 确保组件目录结构一致：
    确保所有引入的组件路径一致，避免路径错误导致组件无法正常加载。

了解Vue3组件的生命周期

Vue3的组件生命周期包括多个阶段，这些阶段按照特定的顺序执行。组件的生命周期是组件从创建到销毁的整个过程。了解这些阶段有助于优化组件的性能和行为。

  1. 生命周期阶段：

    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeUnmount
    • unmounted

  2. 示例：创建并使用一个公共按钮组件

    在之前的MyButton组件中，可以添加生命周期钩子来观察组件的生命周期。

    <template>
 <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
 name: 'MyButton',
 props: {
   text: {
     type: String,
     default: 'Click Me'
   }
 },
 methods: {
   handleClick() {
     console.log('Button clicked');
   }
 },
 beforeCreate() {
   console.log('beforeCreate: Component is being created');
 },
 created() {
   console.log('created: Component has been created, data properties are available');
 },
 beforeMount() {
   console.log('beforeMount: Component is being mounted');
 },
 mounted() {
   console.log('mounted: Component has been mounted and is in the DOM');
 },
 beforeUpdate() {
   console.log('beforeUpdate: Component is being updated');
 },
 updated() {
   console.log('updated: Component has been updated and the DOM is now up-to-date');
 },
 beforeUnmount() {
   console.log('beforeUnmount: Component is being unmounted');
 },
 unmounted() {
   console.log('unmounted: Component has been unmounted');
 }
}
</script>

<style scoped>
button {
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 background-color: #007bff;
 color: white;
 cursor: pointer;
}
</style>

公共组件的传递与接收数据

父组件向子组件传递数据

父组件可以通过props向子组件传递数据。子组件可以接收这些数据并在模板中使用。

  1. 父组件传递数据：
    在父组件中定义一个变量并将其传递给子组件。

    <template>
 <div>
   <h1>Parent Component</h1>
   <my-button text="Hello, {{ dynamicText }}"></my-button>
 </div>
</template>

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

export default {
 name: 'ParentComponent',
 components: {
   MyButton
 },
 data() {
   return {
     dynamicText: 'Dynamic Text'
   };
 }
}
</script>
  2. 子组件接收数据：
    在子组件中定义props来接收父组件传递的数据。 
    <script>
export default {
 name: 'MyButton',
 props: {
   text: {
     type: String,
     default: 'Click Me'
   }
 },
 methods: {
   handleClick() {
     console.log('Button clicked');
   }
 }
}
</script>

子组件向父组件传递数据

子组件可以通过事件向父组件传递数据，父组件通过v-on监听子组件的事件来接收数据。

  1. 子组件触发事件：
    在子组件中定义一个方法来触发事件，并将需要传递的数据作为参数传递给事件。

    <script>
export default {
 name: 'MyButton',
 props: {
   text: {
     type: String,
     default: 'Click Me'
   }
 },
 methods: {
   handleClick() {
     this.$emit('button-clicked', 'Data from button');
   }
 }
}
</script>

<template>
 <div>
   <button @click="handleClick">{{ text }}</button>
 </div>
</template>

  2. 父组件监听事件：
    在父组件中监听子组件触发的事件，并在事件处理函数中接收传递的数据。

    <template>
 <div>
   <h1>Parent Component</h1>
   <my-button text="Hello, Parent" @button-clicked="handleButtonClicked"></my-button>
 </div>
</template>

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

export default {
 name: 'ParentComponent',
 components: {
   MyButton
 },
 methods: {
   handleButtonClicked(data) {
     console.log('Button clicked from parent:', data);
   }
 }
}
</script>

示例：创建并使用一个公共对话框组件

  1. 创建对话框组件：
    创建一个新的组件文件src/components/MyDialog.vue。

    <template>
 <div class="dialog" v-if="visible">
   <div class="dialog-content">
     <slot></slot>
   </div>
   <button @click="closeDialog">Close</button>
 </div>
</template>

<script>
export default {
 name: 'MyDialog',
 props: {
   visible: {
     type: Boolean,
     default: false
   }
 },
 methods: {
   closeDialog() {
     this.$emit('close');
   }
 }
}
</script>

<style scoped>
.dialog {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: white;
 padding: 20px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 z-index: 1000;
}
</style>

  2. 在父组件中使用对话框组件：
    在父组件App.vue中使用MyDialog组件。

    <template>
 <div id="app">
   <button @click="openDialog">Open Dialog</button>
   <my-dialog :visible="isDialogVisible" @close="closeDialog">
     <p>This is a dialog</p>
   </my-dialog>
 </div>
</template>

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

export default {
 name: 'App',
 components: {
   MyDialog
 },
 data() {
   return {
     isDialogVisible: false
   };
 },
 methods: {
   openDialog() {
     this.isDialogVisible = true;
   },
   closeDialog() {
     this.isDialogVisible = false;
   }
 }
}
</script>

<style>
#app {
 text-align: center;
 margin-top: 60px;
}
</style>

公共组件的样式与样式隔离

如何在公共组件中使用样式

公共组件可以通过内联样式、CSS类或使用<style>标签来添加样式。在公共组件中使用样式时，需要注意样式隔离问题，以避免样式冲突。

  1. 内联样式：
    在模板中直接使用style属性添加内联样式。

    <template>
 <button style="background-color: #007bff; color: white;">Click Me</button>
</template>

  2. CSS类：
    定义CSS类来复用样式。

    <template>
 <button class="my-button">Click Me</button>
</template>

<style>
.my-button {
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 5px;
 padding: 10px 20px;
}
</style>

  3. 使用<style>标签：
    在组件内部使用<style>标签来定义样式。

    <template>
 <button class="my-button">Click Me</button>
</template>

<style scoped>
.my-button {
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 5px;
 padding: 10px 20px;
}
</style>

理解scoped样式

scoped样式是指在<style>标签中添加scoped属性，使得样式仅作用于该组件内部。这样可以避免样式冲突，提高组件的可复用性。

  1. 使用scoped样式：
    在组件中添加<style scoped>来定义样式。

    <template>
 <button class="my-button">Click Me</button>
</template>

<style scoped>
.my-button {
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 5px;
 padding: 10px 20px;
}
</style>

示例：创建并使用一个公共表格组件

  1. 创建表格组件：
    创建一个新的组件文件src/components/MyTable.vue。

    <template>
 <table>
   <thead>
     <tr>
       <th v-for="(col, index) in columns" :key="index">{{ col }}</th>
     </tr>
   </thead>
   <tbody>
     <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
       <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
     </tr>
   </tbody>
 </table>
</template>

<script>
export default {
 name: 'MyTable',
 props: {
   columns: {
     type: Array,
     required: true
   },
   rows: {
     type: Array,
     required: true
   }
 }
}
</script>

<style scoped>
table {
 width: 100%;
 border-collapse: collapse;
}
th, td {
 border: 1px solid #ccc;
 padding: 8px;
 text-align: left;
}
th {
 background-color: #f2f2f2;
}
</style>

  2. 在父组件中使用表格组件：
    在父组件App.vue中使用MyTable组件。

    <template>
 <div id="app">
   <h1>My Table</h1>
   <my-table :columns="tableColumns" :rows="tableRows"></my-table>
 </div>
</template>

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

export default {
 name: 'App',
 components: {
   MyTable
 },
 data() {
   return {
     tableColumns: ['Name', 'Age', 'Country'],
     tableRows: [
       ['John Doe', 25, 'USA'],
       ['Jane Smith', 30, 'Canada'],
       ['Mike Johnson', 35, 'Australia']
     ]
   };
 }
}
</script>

<style>
#app {
 text-align: center;
 margin-top: 60px;
}
</style>

优化公共组件的性能

组件优化的常见方法

优化公共组件的性能可以通过多种方式实现，包括减少渲染次数、优化DOM操作、避免不必要的计算等。

  1. 减少渲染次数：
    使用v-if和v-show指令来控制组件的渲染。

    <template>
 <div v-if="isVisible">
   <my-component />
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
   return {
     isVisible: true
   };
 }
}
</script>

  2. 优化DOM操作：
    通过批量更新DOM来减少DOM操作次数。

    <template>
 <div v-for="item in items" :key="item.id">
   <p>{{ item.name }}</p>
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
   return {
     items: [
       { id: 1, name: 'Item 1' },
       { id: 2, name: 'Item 2' },
       { id: 3, name: 'Item 3' }
     ]
   };
 }
}
</script>

  3. 避免不必要的计算：
    使用computed属性来避免重复计算。

    <template>
 <div>{{ fullName }}</div>
</template>

<script>
export default {
 name: 'App',
 data() {
   return {
     firstName: 'John',
     lastName: 'Doe'
   };
 },
 computed: {
   fullName() {
     return `${this.firstName} ${this.lastName}`;
   }
 }
}
</script>

使用key属性优化组件渲染

key属性可以帮助Vue3更好地识别哪些元素已经改变、添加或删除，从而优化组件的渲染效率。

  1. 使用key属性：
    在子元素中使用key属性来优化组件的渲染。

    <template>
 <div>
   <my-component :key="item.id" v-for="item in items" :item="item"></my-component>
 </div>
</template>

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

export default {
 name: 'App',
 data() {
   return {
     items: [
       { id: 1, name: 'Item 1' },
       { id: 2, name: 'Item 2' },
       { id: 3, name: 'Item 3' }
     ]
   };
 }
}
</script>

示例：创建并使用一个公共导航组件

  1. 创建导航组件：
    创建一个新的组件文件src/components/MyNav.vue。

    <template>
 <nav>
   <ul>
     <li v-for="(link, index) in links" :key="index">
       <router-link :to="link.path">{{ link.name }}</router-link>
     </li>
   </ul>
 </nav>
</template>

<script>
export default {
 name: 'MyNav',
 props: {
   links: {
     type: Array,
     required: true
   }
 }
}
</script>

<style scoped>
nav {
 background-color: #333;
 padding: 10px;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline;
 margin-right: 10px;
}
a {
 color: white;
 text-decoration: none;
 font-size: 18px;
}
</style>

  2. 在父组件中使用导航组件：
    在父组件App.vue中使用MyNav组件。

    <template>
 <div id="app">
   <my-nav :links="navLinks"></my-nav>
   <router-view />
 </div>
</template>

<script>
import MyNav from './components/MyNav.vue';
import { RouterLink, RouterView } from 'vue-router';

export default {
 name: 'App',
 components: {
   MyNav,
   RouterLink,
   RouterView
 },
 data() {
   return {
     navLinks: [
       { name: 'Home', path: '/' },
       { name: 'About', path: '/about' },
       { name: 'Contact', path: '/contact' }
     ]
   };
 }
}
</script>

<style>
#app {
 text-align: center;
 margin-top: 60px;
}
</style>

通过以上步骤和示例，可以更好地理解和应用Vue3公共组件的概念和实践。使用公共组件可以提高代码的复用性、可维护性，同时通过优化组件的性能，可以提高应用的用户体验。

點擊查看更多內(nèi)容
為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學(xué)習(xí)，寫下你的評論
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學(xué)

大額優(yōu)惠券免費領(lǐng)

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消