vue学习（组件Component）

最新推荐文章于 2025-02-04 11:30:46 发布
原创 最新推荐文章于 2025-02-04 11:30:46 发布 · 256 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

博客围绕Vue展开，介绍了组件相关内容，包括局部组件、全局组件，还阐述了父子组件传值的两种方式，即Prop（父传子）和自定义事件（子传父），同时提到了输入框、选择框父子组件传值，Prop是单向绑定。

组件

组件一：

在这里插入图片描述
这样写，它们之间的关系你应该就懂了
在这里插入图片描述
在这里插入图片描述

组件二：局部组件

在这里插入图片描述

组件三：全局组件

各位这步我失败了，我整不出来，谁要是会的，捞我一下
在这里插入图片描述

Prop(父组件给子组件传值)

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
父组件写法：
在这里插入图片描述
子组件写法：
在这里插入图片描述
在这里插入图片描述

组件-自定义事件（子组件给父组件传值）

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
在这里插入图片描述
输入框input父子组件之间传值
在这里插入图片描述
选择框checkbox父子组件之间传值
在这里插入图片描述
在这里插入图片描述

Vue动态组件＜component＞传递变量
科技向善
02-06 5544
Vue的动态组件是一个强大的模块，通过动态组件可以让页面组件随意切换，不需要通过路由定位，它在使用过程和普通自定义的组件基本一致，如下像下方给动态组件传递props值在以上的currentComponent组件中，也有一个parentProp的props变量，这样就可以逐层传递变量啦，用于比如权限等级不同，显示的表格的列数不同等（不同权限等级对应不同的parentProp值）
vue内置组件component–通过is属性动态渲染组件操作
11-20
在本篇文章中，我们将深入探讨 Vue 内置组件 `component` 的 `is` 特性，以及它在动态渲染组件时的作用。 首先，`component` 是 Vue 提供的一个内置组件，用于实现动态组件的功能。动态组件允许我们在应用中根据...
Vue入门-组件化
shenzhen_zsw的专栏
06-13 339
Vue入门-组件化6.组件化6.1.全局组件6.2.组件的复用6.3.局部注册6.4.组件通信6.4.1.props（父向子传递）6.4.2.props验证6.4.3.动态静态传递6.4.4.子向父的通信 6.组件化 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。 但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面...
十六、Component 初识组件
基督山伯爵的博客
10-27 537
                       Component 初识组件  &
Vue 组件学习笔记
最新发布
m0_61590702的博客
02-04 494
vue学习笔记
vue从入门到进阶：组件Component详解（六）
weixin_42580704的博客
01-19 656
文章目录 一.什么是组件？ 二.注册组件 全局注册 局部注册 三.Prop 使用 Prop 传递数据 动态 Prop 字面量语法 vs 动态语法 单向数据流 Prop 验证 四.非Prop特性 五.自定义事件 使用 v-on 绑定自定义事件 给组件绑定原生事件.native .sync 修饰符(2.3.0+) 使用自定义事件的表单输入组件 自定义组件的 v-model（2.2.0 新增） 非父子组...
Vue.js 2.0中$on与$emit如何使用之实例讲解
极客神殿
12-08 806
先对两个方法来一波解释 vm.$on(event,callback) 参数： {string | Array} event (数组只在 2.2.0+ 中支持) {Function} callback 用法： 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 示例： vm.$on('test', function (msg) { co...
vue内置组件component--通过is属性动态渲染组件操作
10-15
补充知识：Vue组件的 `is` 特性 Vue.js 中的 `is` 特性是为了处理HTML语法规则的限制。例如，`<ul>` 标签只能直接包含 `<li>` 子元素，不能直接插入自定义组件。在这种情况下，我们可以通过在 `<li>` 元素上使用 `...
解决vue的router组件component在import时不能使用变量问题
10-15
总的来说，解决Vue Router组件`component`在`import`时不能使用变量的问题，主要是通过动态导入和字符串模板来实现。理解这些技术可以帮助我们更好地优化Vue应用的路由加载，提高用户体验，同时保持代码的灵活性和可...
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
11-19
然后在Vue组件中引用这些配置： ```html <component :is="selectedComponent.component" ref="selectedComponent.refName"></component> import config from '@/config/index.js'; export default { data() ...
Vue-Router路由
qq_40282446的博客
11-12 258
路由的基本概念与原理 后端路由 概念： 本质： SPA单页面应用程序 前端路由 概念：根据不同的用户事件，显示不同的页面内容 本质：用户事件与事件处理函数之间的对应关系 Vue Router的使用步骤(★★★) 是 Vue.js 官方的路由器管理。 基本使用步骤： A.导入js文件 <script src="lib/vue_2.5.22.js"></script> ...
Vue中path和component属性
喝旺仔la的博客
10-31 830
属性指定了路由的匹配规则，即当用户访问某个URL时，Vue Router会检查这个URL是否与某个路由的。是路由配置对象中最重要的两个属性。它们共同定义了路由的匹配规则和当路由被匹配时应该渲染哪个组件。属性的值通常是一个字符串，表示URL的路径部分。它可以是静态的，也可以是包含动态部分的（通过。属性的值通常是一个Vue组件的构造函数或者是一个通过。属性指定了当路由被匹配时应该渲染哪个Vue组件。在这个示例中，我们定义了两个路由：一个是根路径。，这是一个动态路径，当用户访问这个路径时（例如。
Vue学习笔记(四)——Vue路由
hsy_hhh的博客
08-26 386
vue是一个单页面程序应用，即使有无数个vue文件，也只是vue页面中的组件s vue-router是vue的一个插件，用来提供路由功能，通过路由的改变动态加载组件，达到开发单页面程序的目的 设置了路由之后，不需要再注册组件，只需要注册了路由之后，通过path、name进行组件之间的切换 路由应用 1.声明组件 let com = { data(){ return{} }, template:``, } 2.声明路由router，创建一个路由实例，可以为router设置：
Vue router 路由中path和component的作用
weixin_45608986的博客
08-10 1万+
component是获取跳转页面的地址 方式一： 和引入组件一样 先把要跳转的页面引入router js文件中再进行调用 方式二： 直接在component获取要跳转页面的位置 component:()=>import(' 跳转页面地址') path是路由参数，当路径匹配到当前路由参数时，就会跳转component所对应的页面组件 ...
【Vue】自定义组件绑定 v-model
qq_45677671的博客
07-22 4314
自定义组件绑定 v-model 使用案例
Vue中的component
Huaasshu的博客
02-28 9995
众所周知，Vue框架提供了自定义组件的功能，以便于我们在开发过程中定义自己需要的组件以实现不同的功能，满足不同的需求，增加代码的可复用性。 相信基本的创建组件的方式大家已经熟悉了，今天我来讲一讲component的使用 在Vue中，component可以作为一个占位符使用，就像template一样，不同的是component是组件的占位符，主要用于展示不同的组件，即component就是一个动态组件 :is属性可以用来指定要展示的组件名称，根据is的值来渲染组件 使用方法与普通组件相同，在我的理
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4375
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue插件学习
qq_40910781的博客
03-31 256
Vue插件 Vue-cli 官方网址：https://cli.vuejs.org/zh/guide/ 安装vue-cli：npm install -g @vue/cli 查看版本：vue --version 单Vue开发 你可以使用vue server对单个Vue文件进行快速的原型开发，通过安装以下依赖 安装：npm install -g @vue/cli-service-global Usage: serve [options] [entry] 在开发环境模式下零配置为 .js 或 .vue 文件启动一个
vue.component和vue.use的用法
热门推荐
yanzhi的博客
12-29 3万+
使用Vue.component()方法注册全局组件。 这个方法接收两个参数： 第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名称。 第二个参数是将要注册的Vue组件。 import Vue from 'vue'; // 引入loading组件 import Loading from './loading.vue'; // 将loading注册为全局组件，在别的组...
vue动态组件component
11-17
Vue中的动态组件可以通过`<component>`标签来实现，通过`is`属性来指定要渲染的组件。当`is`属性的值发生变化时，`<component>`标签会自动销毁旧组件并创建新组件。 以下是一个简单的例子，通过点击按钮来动态切换...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值