广州番禺区属于什么风险地区_开发公司个人工作总结_腾讯云1元域名_成都网站设计

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

【热门主题】000026 Vue.js 组件开发全攻略
📚 一、Vue.js 组件基础
- 📘（一）组件化思想
- 📘（二）注册组件
- 📘（三）组件数据存放
📚二、组件间通信
- 📘（一）父传子
- 📘（二）子传父
📚三、组件开发案例
- 📘（一）表格组件开发
- - 🔖1. 基本结构：
  - 🔖2. 提取组件：
  - 🔖3. 组件数据流：
  - 🔖4. 搜索功能增加：
  - 🔖5. 表格排序：
- 📘（二）计数器组件
- - 🔖1. 全局组件的定义：
  - 🔖2. 使用全局计数器组件：
📚四、最佳实践与高级应用
- 📘（一）最佳实践
- - 🔖1. 命名规范
  - 🔖2. Props 验证
  - 🔖3. 数据函数要求
  - 🔖4. 避免操作 DOM
  - 🔖5. 使用计算属性和侦听器
- 📘（二）状态管理
- - 🔖1. Vuex 的基本概念
  - 🔖2. Vuex 的安装与基本配置
  - 🔖3. 使用 Vuex 管理状态
- 📘（三）动态组件与条件渲染
- - 🔖1. 动态组件
  - 🔖2. 条件渲染
- 📘（四）列表渲染与虚拟滚动优化
- - 🔖1. 列表渲染
  - 🔖2. 虚拟滚动优化
- 📘（五）表单输入与表单验证
- - 🔖1. 表单输入
  - 🔖2. 表单验证

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

【热门主题】000026 Vue.js 组件开发全攻略

📚 一、Vue.js 组件基础

📘（一）组件化思想

Vue.js 的组件化思想是将复杂的应用程序拆分为一个个独立可复用的小组件。这种思想极大地提高了代码的组织管理能力和扩展性。通过将页面拆分为组件，可以更好地实现功能的模块化，使得每个组件专注于特定的功能，降低了代码的复杂度。例如，一个电商网站可以拆分为头部导航栏组件、商品列表组件、购物车组件等。当需要修改某个功能时，只需找到对应的组件进行修改，而不会影响其他部分的代码。同时，组件化也使得代码的复用性大大提高，减少了重复开发的工作量。

📘（二）注册组件

全局注册：在 main.js 文件中引入组件，然后通过 Vue.component 方法全局注册组件。例如：

import MyCounter from './components/MyCounter.vue';Vue.component('MyCounter', MyCounter)

全局注册后，在项目的任意位置均可使用组件。
局部注册：在某个 Vue 页面中局部使用组件。首先在页面中引入组件，然后在 components 属性中注册组件，最后才能在页面代码部分引用组件。例如：

import MyCounter from '@/components/MyCounter.vue';export default { name:'Home', components:{ MyCounter } }

。

📘（三）组件数据存放

组件对象的 data 属性必须是一个函数，且这个函数返回一个对象，对象内部保存着数据。这是因为如果 data 不是一个函数，Vue 会直接报错。其次，Vue 让每个组件对象都返回一个新的对象，这样可以避免组件在多次使用后相互影响。例如：

Vue.component('my-component', { template: <div>{{ msg }}</div>, data() { return { msg : 'hello vue' } } })

。在这个例子中，data 函数返回了一个包含 msg 属性的对象，确保了每个组件都有自己独立的数据。

📚二、组件间通信

📘（一）父传子

在 Vue.js 中，父组件向子组件传递数据主要通过 props 属性实现。props 可以接收字符串、数组和对象等不同类型的数据。
对于字符串和数组类型的数据传递较为直观。例如，父组件可以通过以下方式向子组件传递一个字符串：，在子组件中通过props: [‘message’]来接收这个字符串。如果是数组类型的数据，同样可以通过类似的方式传递和接收。
当使用对象作为传递的数据时，可以进行类型限制和设置默认值。验证支持的类型有 String、Number、Boolean、Array、Object、Date、Function 和 Symbol。比如，可以这样进行类型限制（单值）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id ="app"><!-- 使用父组件的数据时，必须使用 v-bind 指令 --><cpn :cmessage="message"></cpn></div><template id="cpn"><div><h2>{{cmessage}}</h2></div></template><script>// 父传子：propsconst cpn={template :'#cpn',props:{//1，类型限制（ 'null' 匹配任何类型）cmessage:String}}// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el:'#app',data:{message:'好冷啊',movides:['温暖的抱抱','拆弹专家','送你一朵红花']},components:{cpn}});</script>
</body>
</html>

也可以进行多个类型限制，如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id ="app"><!-- 使用父组件的数据时，必须使用 v-bind 指令 --><cpn :cmessage="message"></cpn></div><template id="cpn"><div><h2>{{cmessage}}</h2></div></template><script>// 父传子：propsconst cpn={template :'#cpn',props:{//2，类型限制（ 'null' 匹配任何类型）cmessage:[String,Number]}}// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el:'#app',data:{message:'好冷啊',movides:['温暖的抱抱','拆弹专家','送你一朵红花']},components:{cpn}});</script>
</body>
</html>

还可以设置 required 属性，要求必须使用 v-bind 绑定相应的值，如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id ="app"><!-- 使用父组件的数据时，必须使用 v-bind 指令 --><cpn></cpn></div><template id="cpn"><div><h2>{{cmessage}}</h2><h2>{{cmovides}}</h2></div></template><script>// 父传子：propsconst cpn={template :'#cpn',props:{cmessage:{type: String,required:true},cmovides:{type: Array}}}// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el:'#app',data:{message:'好冷啊',movides:['温暖的抱抱','拆弹专家','送你一朵红花']},components:{cpn}});</script>
</body>
</html>

带有默认值的字符串可以这样设置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id ="app"><!-- 使用父组件的数据时，必须使用 v-bind 指令 --><cpn></cpn></div><template id="cpn"><div><h2>{{cmessage}}</h2></div></template><script>// 父传子：propsconst cpn={template :'#cpn',props:{cmessage:{type: String,default:'踏山河'}}}// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el:'#app',data:{message:'好冷啊',movides:['温暖的抱抱','拆弹专家','送你一朵红花']},components:{cpn}});</script>
</body>
</html>

带有默认值的数组需要从一个工厂函数获取默认值，如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id ="app"><!-- 使用父组件的数据时，必须使用 v-bind 指令 --><cpn></cpn></div><template id="cpn"><div><h2>{{cmessage}}</h2></div></template><script>// 父传子：propsconst cpn={template :'#cpn',props:{// 对象或数组默认值必须从一个工厂函数获取cmessage:{type: Array,default(){return['真冷','生死无话']}}}}// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el:'#app',data:{message:'好冷啊',movides:['温暖的抱抱','拆弹专家','送你一朵红花']},components:{cpn}});</script>
</body>
</html>

还可以使用 validator 进行验证，如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id ="app"><!-- 使用父组件的数据时，必须使用 v-bind 指令 --><cpn :cmessage="message"></cpn></div><template id="cpn"><div><h2>{{cmessage}}</h2></div></template><script>// 父传子：propsconst cpn={template :'#cpn',props:{cmessage:{// cmessage 值必须匹配下列字符串中的一个,否则会报错validator(value){return ['success','warn'].indexOf(value)!=-1}}}}// 创建 Vue 实例,得到 ViewModelvar vm = new Vue({el:'#app',data:{message:'好冷啊',movides:['温暖的抱抱','拆弹专家','送你一朵红花']},components:{cpn}});</script>
</body>
</html>

📘（二）子传父

子组件向父组件传递数据通常使用自定义事件实现。子组件通过 $emit() 触发事件，父组件用 v-on 监听子组件事件。
例如：

<body><div id="app"><cpn @itemclick="cpnClick"></cpn></div><template id="cpn"><div><button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button></div></template><script src="../vue.js"></script><script>const cpn = {template: '#cpn',data() {return {categories: [{ id: 1, name: '篮球' },{ id: 2, name: '羽毛球' },{ id: 3, name: '乒乓球' },{ id: 4, name: '网球' },]}},methods: {btnClick(item) {this.$emit('itemclick', item) // 向父组件发送事件名称，父组件负责监听该事件}}}const app = new Vue({el: '#app',data: {},components: { cpn },methods: {cpnClick(item) { // 默认传递 itemconsole.log('hi', item)}}})</script>
</body>

在这个例子中，子组件中的按钮点击时，通过 $emit() 触发 itemclick 事件，并将点击的项作为参数传递给父组件。父组件通过 v-on 监听 itemclick 事件，并在事件处理函数中接收这个参数进行处理。

📚三、组件开发案例

📘（一）表格组件开发

🔖1. 基本结构：

首先，一个表格组件通常由搜索框和表格本身组成。我们可以使用 HTML 和 CSS 构建基本的表格结构，包括表头和表体。例如：

<div id="demo"><form id="search">Search <input name="query"></form><table><thead><tr><th>name</th><th>power</th></tr></thead><tbody><tr><td>Jack Chan</td><td>7000</td></tr></tbody></table>
</div>

通过添加基本的 CSS 样式，可以美化表格的外观。

🔖2. 提取组件：

为了使表格成为独立的组件，我们可以定义一个名为demo-grid的组件。将表格的部分代码放入组件模板中，并通过<script type="text/x-template"标签定义模板。然后，在 Vue 中注册组件，并在页面中使用该组件。例如：

<script type="text/x-template" id="grid-template"><table><thead><tr><th v-for="key in columns">{{key}}</th></tr></thead><tbody><tr v-for="entry in data"><td v-for="key in columns">{{entry[key]}}</td></tr></tbody></table>
</script>
Vue.component('demo-grid',{template:"#grid-template",props: {data: Array,columns: Array}
});
var demo = new Vue({el: '#demo'
});

🔖3. 组件数据流：

为了让表格组件能够接收外部的数据，我们可以通过props属性传递数据。在 Vue 的实例中，定义表格的头部数据gridColumns和表格内容数据gridData，然后将这些数据传递给表格组件。例如：

var demo = new Vue({el: '#demo',data: {gridColumns: ['name', 'power'],gridData: [{ name: 'Chuck Norris', power: Infinity },{ name: 'Bruce Lee', power:9000 },{ name: 'Jackie Chan', power:7000 },{ name: 'Jet Li', power:8000 }]}
});
<demo-grid :data="gridData" :columns="gridColumns"></demo-grid>

在组件中，接收这些数据并在模板中使用。

🔖4. 搜索功能增加：

为了实现搜索功能，我们可以绑定搜索框的模型，并在 Vue 实例中初始化搜索查询的数据。当搜索框中的内容发生变化时，通过过滤器过滤表格数据，只显示符合搜索条件的行。例如：

<form id="search">Search <input name="query" v-model="searchQuery">
</form>
var demo = new Vue({el: '#demo',data: {searchQuery: '',//...}
});
<demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"></demo-grid>
Vue.component('demo-grid', {template: '#grid-template',props: {data: Array,columns: Array,filterKey: String}
});
<tr v-for="entry in data | filterBy filterKey"><td v-for="key in columns">{{entry[key]}}</td>
</tr>

🔖5. 表格排序：

实现表格的排序功能相对复杂一些。首先，在表头的列上添加点击事件，当点击列头时触发排序函数。在排序函数中，根据点击的列和当前的排序顺序，使用排序算法对表格数据进行排序。例如：

<th v-for="key in columns" @click="sortBy(key)"></th>
Vue.component('demo-grid', {//...methods: {sortBy(key) {// 实现排序逻辑}}
});

📘（二）计数器组件

🔖1. 全局组件的定义：

在 Vue.js 中，全局组件是指在整个应用程序中无需单独导入就可以使用的组件。例如，我们可以创建一个全局计数器组件：

// 创建全局计数器组件
Vue.component('Counter', {template: '<div><button @click="increment">+</button><span>{{count}}</span><button @click="decrement">-</button></div>',data() {return {count: 0}},methods: {increment() {this.count++;},decrement() {this.count--;}}
});

🔖2. 使用全局计数器组件：

在任何 Vue 组件的模板中，都可以直接使用标签来引用全局计数器组件。例如：

<div id="app"><Counter></Counter>
</div>
<script>new Vue({el: '#app'});
</script>

通过以上步骤，我们创建了一个简单的全局计数器组件，并在应用程序中使用了它。全局组件的使用可以提高代码的复用性，减少重复的代码编写。

📚四、最佳实践与高级应用

📘（一）最佳实践

🔖1. 命名规范

在 Vue.js 开发中，良好的命名规范可以提高代码的可读性和可维护性。组件的命名应该采用大驼峰式命名法，例如 MyComponent。对于属性和方法的命名，可以使用小驼峰式命名法，如 myProperty 和 myMethod。这样可以使代码更加清晰易读，方便团队协作开发。

🔖2. Props 验证

Props 验证是确保组件之间数据传递的准确性和安全性的重要手段。在 Vue.js 中，可以通过在组件的 props 选项中定义验证规则来对传入的属性进行验证。例如，可以验证属性的类型、是否必填、默认值等。这样可以避免因传入错误的数据类型或未传入必填属性而导致的错误。

🔖3. 数据函数要求

在 Vue.js 组件中，data 属性必须是一个函数，且这个函数返回一个对象。这是为了确保每个组件实例都有自己独立的数据副本，避免多个组件实例之间的数据相互影响。例如：data() { return { count: 0 }; }。

🔖4. 避免操作 DOM

在 Vue.js 中，应该尽量避免直接操作 DOM 元素。Vue.js 通过数据驱动的方式来自动更新 DOM，直接操作 DOM 可能会导致与 Vue.js 的响应式系统冲突，从而产生不可预测的结果。如果需要操作 DOM，可以使用 Vue.js 提供的指令和方法，如 v-if、v-for、$refs 等。

🔖5. 使用计算属性和侦听器

计算属性和侦听器是 Vue.js 中非常有用的功能，可以帮助我们简化代码逻辑，提高代码的可读性和可维护性。计算属性是基于响应式数据计算得到的值，可以在模板中直接使用。侦听器可以监听响应式数据的变化，并执行相应的操作。例如，可以使用计算属性来格式化数据，使用侦听器来监听用户输入的变化并进行相应的处理。

📘（二）状态管理

Vuex 是 Vue.js 中用于状态管理的工具，它可以帮助我们更好地管理应用级状态，确保状态的一致性和可预测性。

🔖1. Vuex 的基本概念

Vuex 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 主要由五个核心概念组成：state（状态）、getters（计算属性）、mutations（更改状态的逻辑，同步操作）、actions（提交 mutations，异步操作）和 modules（将 store 模块化）。

🔖2. Vuex 的安装与基本配置

要使用 Vuex，首先需要安装它。在 Vue CLI 项目中，可以通过以下命令安装 Vuex：vue add vuex。安装完成后，需要在 main.js 中引入并配置 Vuex：

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}
});

🔖3. 使用 Vuex 管理状态

在 Vue.js 组件中，可以通过 this. $s t ore . s t a t e 访问 V u e x 中的状态，通过 t hi s .$ store.commit 提交 mutations 来更改状态，通过 this.$store.dispatch 触发 actions。例如：

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template>
<script>
import { mapActions } from 'vuex';
export default {computed: {count() {return this.$store.getters.count;}},methods: {...mapActions(['increment'])}
};
</script>

📘（三）动态组件与条件渲染

在 Vue.js 中，动态组件和条件渲染可以实现更灵活的界面控制。

🔖1. 动态组件

动态组件是指在运行时根据条件动态地选择和渲染不同的组件。可以使用标签和 is 属性来实现动态组件。例如：

<template><div><component :is="currentComponent"></component></div>
</template>
<script>
export default {data() {return {currentComponent: 'ComponentA'};}
};
</script>

🔖2. 条件渲染

条件渲染可以根据条件选择要显示的组件或元素。可以使用 v-if、v-else-if 和 v-else 指令来实现条件渲染。例如：

<template><div><div v-if="showComponentA"><ComponentA /></div><div v-else-if="showComponentB"><ComponentB /></div><div v-else><ComponentC /></div></div>
</template>
<script>
export default {data() {return {showComponentA: false,showComponentB: false,showComponentC: true};}
};
</script>

📘（四）列表渲染与虚拟滚动优化

在 Vue.js 中，列表渲染是一种常见的需求。当列表数据量较大时，为了提高性能，可以使用虚拟滚动优化技术。

🔖1. 列表渲染

可以使用 v-for 指令来渲染列表。例如：

<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template>
<script>
export default {data() {return {items: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }]};}
};
</script>

🔖2. 虚拟滚动优化

虚拟滚动是一种优化技术，它只渲染可见区域的列表项，当滚动时动态更新可见区域。可以使用第三方库如 vue-virtual-scroller 来实现虚拟滚动优化。例如：

<template><div><virtual-scroller :items="items" :item-size="50"><template #default="{ item }"><div>{{ item.name }}</div></template></virtual-scroller></div>
</template>
<script>
import { VirtualScroller } from 'vue-virtual-scroller';
export default {components: {VirtualScroller},data() {return {items: [// 大量的列表数据]};}
};
</script>

📘（五）表单输入与表单验证

在 Vue.js 中，可以通过响应式数据和指令简化表单逻辑，实现复杂的输入验证。

🔖1. 表单输入

可以使用 v-model 指令实现表单输入的双向绑定。例如：

<template><div><input v-model="username" placeholder="请输入用户名"></div>
</template>
<script>
export default {data() {return {username: ''};}
};
</script>

🔖2. 表单验证

可以使用自定义指令或第三方库来实现表单验证。例如，可以使用 vee-validate 库来实现表单验证：

<template><div><input v-model="username" v-validate="'required|alpha'"><span v-if="errors.has('username')">{{ errors.first('username') }}</span></div>
</template>
<script>
import { ValidationProvider } from 'vee-validate';
export default {components: {ValidationProvider},data() {return {username: ''};}
};
</script>