Vue引用其他组件,但组件某些部分不需要时的简单处理
2023-09-27 14:24:14 时间
项目开发时,我们会把多个地方重复使用的模块抽象成组件,提供给大家一起使用,但是使用组件的时候偶尔会遇见一些问题,比如说组件里只有某些东西自己并不需要,这个时候我们可以对组件进行简单的修改,而不影响其他人的使用。
这里有一个方法,举个例子简单说明一下。
我们在页面上引入一个其他组件,然后给组件传入一个状态值。
页面
<template> <div> <show-my-test :state="true"></show-my-test> </div> </template> <script> import showMyTest from '~/components/showMyTest.vue'; export default { name: 'index', components: { showMyTest: showMyTest } }; </script> <style scoped> </style>
组件通过props获取Boolean类型的值,如果没有获取到值则会默认为false,我们可以通过这个来解决一些问题。
组件
<template> <div> <div> <p>今天是周一!</p> </div> <div v-if=“!state”> <p>今天天气不错</p> </div> </div> </template> <script> export default { name: 'index', props: { state: { type: Array } }; </script> <style scoped> </style>
这样的话,在使用上面这个组件的时候,如果没有给组件传state的值,则今天天气不错那里正常显示,不影响使用,如果给组件传了一个true的值,则这一块则不会显示。
通过这样的方法可以解决挺多组件复用时候产生的问题,这里只是一个简单的例子,实际问题应该根据需求来处理。
恩,就酱~
相关文章
- vue过滤器
- 如何使用vue开发波纹点击特效组件
- 微信小程序旅游服务平台+后台管理系统|前后分离VUE
- 134/(前端)订单列表布局与显示——子组件挂载的方式与分类管理vue的结构搭建
- 32.Vue:自定义事件组件交互
- 【Vue】组件的基础与组件间通信
- Vue学习笔记之表单绑定输入
- 基于 vue-element 组件实现音乐播放器功能
- Vue组件:网格系统,row & col
- vue 中英文切换
- Vue技术6.2何为数据代理
- vue-cli中vuex IE兼容
- Full-featured Vue 评分组件
- 如何在 vuex action 中获取到 vue 实例
- Vue组件化编程④
- 【实战】Vue Element+Node.js开发企业通用管理后台系统——Vue进阶(上)
- vue实现标签云效果
- Vue 与 React 父子组件之间的关系
- Vue异步组件处理路由组件加载状态
- vue如何在手机中通过本机IP地址访问webApp
- 利用webpack和vue实现组件化