Vue.js - 组件化编程

news/2024/11/27 19:58:04/

1. 前言

Vue.js是一个基于组件的Javascript框架，组件化编程是核心思想之一。通过组件化，Vue允许开发者将用户页面拆分成独立，可重用的部分，从而提升代码的可维护性，可读性以及可服用性。

本文主要讲解在Vue2中组件化编程模式

2. 组件的定义

组件是一个具有独立功能的Vue实例，具有自己的数据，模板，样式与逻辑。每个组件可以相互交互，接收输入(props)，并可以产生输出(事件)，从而形成一个灵活的用户界面

3. 组件化编程的结构

3.1 组件创建

Vue组件最常用的创建方式是使用Vue单文件组件，包含以下三个部分

1. 模板(Template)：定义组件的HTML结构

Vue规定，在组件的模板中我们需要创建一个父标签囊括所有的标签

2. 脚本(Script)：定义组件的逻辑和数据

3. 样式(Style)：定义组件的CSS样式

以下是一个完整Vue组件模板：

javascript"><template></template><style></style><script></script>

3.2 Vue.app

使用Vue.app集成所有的子组件(components)，是应用的核心，管理应用的状态和组件

javascript"><template>
</template><style>
</style><script>export component from './...'export default{components:{} //注册组件
}    
</script>

3.3 main.js

应用的入口Javascript文件，管理应用的状态与组件。

创建Vue实例，定义路由，状态管理，以及全局组件和插件的配置

javascript">// main.js
import Vue from 'vue';
import App from './App.vue';
import Greeting from './Greeting.vue'; // 导入组件// 全局注册组件
Vue.component('Greeting', Greeting);new Vue({render: h => h(App),
}).$mount('#app');

3.4 index.html

应用文件的入口文件，提供挂载点

javascript"><!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

4. 组件的注册

组件可以在全局或局部进行注册

- 全局注册

定义：全局注册是指在Vue应用的整个生命周期，组件都可以被任何地方的模板使用

javascript">// main.js
import Vue from 'vue';
import App from './App.vue';
import Greeting from './Greeting.vue'; // 导入组件// 全局注册组件
Vue.component('Greeting', Greeting);new Vue({render: h => h(App),
}).$mount('#app');

优点：方便在多个组件中使用同一个组件，尤其是在大型应用中

缺点：如果有多个同名组件，全局注册可能会导致命名冲突

- 局部注册

定义：组件只可以在其父组件之中使用，其他组件无法访问该组件

在组件的components选项中进行注册

javascript"><template><div><Greeting></Greeting><div>
</template><style>
</style><script>
import Greeting from './Greeting.vue' export default{components:{Greeting;
}
}
</script>

5. 组件的通信

5.1 数据传递

在子组件中使用props定义子组件中相关属性，父组件通过数据代理模式传递父组件的数据或者方法至子组件

javascript">//父组件
<ChildComponent :message="parentMessage" />//子组件
export default{props:['message'],
}

5.2 事件传递

事件传递主要是通过this.$emit函数出发自定义事件，将数据传递给父组件

javascript">this.$emit('事件名',数据)

将会触发该事件，并传递对应的数据

只需要在父组件上设定好对应的事件，以及事件触发之后执行的函数，数据传递至函数，子组件便将数据传递给父组件了。

子组件：

javascript"><template><button @click='sendData'>Click me</button>
</template><script>export default{methods:{sendData(){this.$emit('childEvent','Hello')}} //通过调用该方法触发事件
}
<script>

父组件:

javascript"><template>
<child @childEvent='handle'></child>
</template><script>export default {components:{child}methods:{handle(message){console.log('这是子组件传来的数据',message)}}
}
</script>

 

5.3 插槽

插槽是一种非常重要的功能，用于实现组件的内容分发。插槽允许开发者在父组件中嵌套内容到子组件中，从而在不修改子组件代码的情况下灵活地定制其内容

5.3.1 默认插槽

子组件：

javascript"><template><div class='child'><slot></slot></div>
</template>

父组件：
 

javascript"><template>
<child>
<p>This is slot</p>
</child>
</template><script>export default{components:{child}
}
</script>

5.3.2 具名插槽

具名插槽允许一个组件中定义多个插槽，每个插槽都拥有自己的名字，这样父组件可以选择性的传递内容到不同的插槽位置

子组件：

javascript"><template><div class="child"><header><slot name="header"></slot></header> <!-- 具名插槽 --><main><slot></slot></main> <!-- 默认插槽 --><footer><slot name="footer"></slot></footer> <!-- 具名插槽 --></div>
</template>

父组件：

javascript"><template><div><child-component><template v-slot:header><h1>This is the header content</h1></template><p>This is the default slot content.</p><template v-slot:footer><footer>Footer content goes here</footer></template></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent}
}
</script>

5.3.3 插槽作用域

插槽不仅仅是用来传递静态内容，还可以向插槽传递数据通过插槽作用域，父组件可以将数据传递到子组件中的插槽，子组件可以在插槽模板内使用这些数据

javascript"><template><div class="child"><slot :message="childMessage"></slot> <!-- 传递数据到插槽 --></div>
</template><script>
export default {data() {return {childMessage: 'Hello from child!'}}
}
</script>

父组件： 

javascript"><template><div><child-component><!-- 使用插槽作用域来访问子组件传递的内容 --><template v-slot:default="slotProps"><p>{{ slotProps.message }}</p> <!-- 输出从子组件传递来的数据 --></template></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent}
}
</script>


http://www.ppmy.cn/news/1550427.html

相关文章

量化交易系统开发-实时行情自动化交易-4.4.1.做市策略实现

量化交易系统开发-实时行情自动化交易-4.4.1.做市策略实现

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来继续说说做市策略实现。 做市策…
阅读更多...
Redis突然变慢，有哪些原因？

Redis突然变慢，有哪些原因？

目录 一、存在bigkey 二、如果Redis 实例设置了内存上限 maxmemory&#xff0c;有可能导致 Redis 变慢 三、开启了内存大页 四、使用了Swap 五、网络带宽过载 六、频繁短连接 一、存在bigkey 如果Redis实例中存储了 bigkey&#xff0c;那么在淘汰删除 bigkey 释放内存时&…
阅读更多...
pip安装github上的开源软件包

pip安装github上的开源软件包

1、若本机中安装的有git&#xff0c;可使用githttps方式安装 # 以安装pyfolio软件包为例,安装指令如下 pip install githttps://github.com/quantopian/pyfolio.git 2、若本机中没有安装git&#xff0c;可以直接使用软件包的zip地址进行安装 # 以安装pyfolio软件包为例,安装…
阅读更多...
Vue前端开发2.3.6 列表渲染指令

Vue前端开发2.3.6 列表渲染指令

在Vue.js中&#xff0c;v-for指令是渲染列表的关键工具&#xff0c;支持从数组、对象、数字和字符串中生成列表。它简化了商品列表等重复元素的创建。为了优化性能&#xff0c;key属性为每个列表项提供唯一标识&#xff0c;帮助Vue追踪节点身份&#xff0c;实现元素重用。实战中…
阅读更多...
03系统设计之商业业务平台（D1_学习前言）

03系统设计之商业业务平台（D1_学习前言）

分享一些优秀的业务平台演化和设计。 【电商交易】京东-亿级商品详情页设计 商品详情页是展示商品详细信息的一个页面&#xff0c;承载在网站的大部分流量和订单的入口。京东商城目前有通用版、全球购、闪购、易车、惠买车、服装、拼购、今日抄底等许多套模板。各套模板的元数…
阅读更多...
HIT 人工智能导论实验 知识表示

HIT 人工智能导论实验 知识表示

猴子摘香蕉问题 Code DFS, Python class MBP:def __init__(self, posMon, posBan, posBox, isOnBox False, isGeBan False):self.posMon, self.posBan, self.posBox, self.isOnBox, self.isGeBan posMon, posBan, posBox, isOnBox, isGeBandef isilLegal(self):return se…
阅读更多...
241123_基于MindSpore学习Bert

241123_基于MindSpore学习Bert

241123_基于MindSpore学习Bert bert和transformer都有Embedding操作&#xff0c;包括词嵌入&#xff08;word embedding&#xff09;和位置嵌入(positional embedding) 但是transformer中的位置信息是三角函数 bert中的位置信息是可学习的&#xff0c;并增加了用于区分不同句…
阅读更多...
seata 各个微服务回滚的时机

seata 各个微服务回滚的时机

在Seata中&#xff0c;当你在服务方法上使用GlobalTransactional注解时&#xff0c;Seata会为该全局事务创建一个事务上下文&#xff0c;并在远程服务调用时传递这个事务上下文。Seata客户端会拦截你的Feign调用&#xff0c;并在调用前后进行额外的处理。 以下是Seata如何知道…
阅读更多...
最新文章

Copyright @ 2022~2023