Vue组件的使用与传参

最新推荐文章于 2024-04-24 14:09:23 发布
最新推荐文章于 2024-04-24 14:09:23 发布
阅读量464 收藏
点赞数
分类专栏： Vue框架 文章标签： weex vue Vue组件的使用与传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42063951/article/details/90719867
版权

router.js中自定义组件

在这里插入图片描述

父页的JS中引入组件

在这里插入图片描述
在components中加要用的组件（components对象没有的话自行写上）

components{
	//导入进来的名字
	InfectionManagment
}

在这里插入图片描述

父页的CSS中引入组件

<组件名></组件名>
<InfectionManagement ></InfectionManagement>

在这里插入图片描述

父组件向子组件传参

data() 中自定义变量
在这里插入图片描述
父组件中加上： :id=“自定义的变量”

<InfectionManagement :id="currentPatientId"></InfectionManagement>

在这里插入图片描述
子组件的JS中加上： props: [‘id’],
在这里插入图片描述
然后在子组件直接this.id就可以拿到父页定义的变量了

打印到控制台就更不用说了
在这里插入图片描述

爱唱歌的前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 组件
weixin_45856470的博客
10-07 319
1. 什么是组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。 2. vue 中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。 3. vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的 JavaScript 行为
vue组件传参
fagdg的博客
07-27 4720
1、定义与使用2、父传子使用props，父传给子的数据是只读的(做默认值，读取显示)不能修改3、子传父使用的事件$emit$emit(事件名,事件值)发送一次事件，事件名{counterchange}和事件值{counter}是自定义的$event固定写法，事件的值{counterchange事件的值，也是子组件$emit的第二个参数}...
vue中的组件介绍
weixin_48864616的博客
12-31 1119
组件就是用来提高代码的复用性的。 组件的本质：上是一个可复用的小号的vue实例。 vue实例（new Vue）是最大的根组件。 组件在使用时就是一个自定义的标签。 组件分类：全局和局部。 定义全局组件： Vue.component(“组件名”,配置对象) （全局组件可以用在不同的实例中） 组件渲染的结果是template中的内容！！！ 【注意】： 1.template中的内容必须被一个元素包含。 这个元素被称为根节点（根元素） 2.每个组件有且只能有一个根元素。 template标签： 作用：模板占位符
vue组件传参的八种方式总结
最新发布
ergdwqe的博客
04-24 1205
-props 接受到的均为 String -->-- 有只有属性没有值, 这种情况 props 指定类型是 Boolean 则接收到的是 true -->
Vue 11种组件传参方式
guorui999的博客
01-17 4754
this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。$children 获取子组件(所有的子组件，不保证顺序)$refs 组件获取组件实例，元素获取元素。$parent 获取父组件。
VUE文件引入另一个VUE文件，并传递参数
qzz12345的博客
11-08 976
记录、备忘。
vue router-link传参以及参数的使用实例
08-28
在Vue.js应用中，Vue Router是官方推荐的路由管理库，它使得页面间的导航变...希望本文提供的`router-link`传参及参数使用实例对你的Vue开发有所帮助，也鼓励你继续探索Vue Router的其他功能，以提升你的应用开发效率。
vue params、query传参使用详解
08-29
Vue 参数传递详解 在 Vue 中，参数传递是一...Vue 中的参数传递方式有多种，包括 params 传参、query 传参和使用 `router-link` 组件传参。不同的传递方式适用于不同的场景，我们可以根据实际情况选择合适的传递方式。
vue路由传参 vue路由传参
11-18
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）功能的重要组成部分。在构建SPA的过程中，我们经常需要在不同的路由之间传递参数，以便于组件之间共享数据。Vue Router 提供了两种...
vue的传参方式汇总和router使用技巧
08-27
Vue传参方式汇总和Router使用技巧 Vue框架中传参方式是非常重要的，它可以帮助开发者在不同的组件之间传递数据，从而实现数据的共享和交互。下面我们将详细介绍 Vue 中的传参方式和 Router 使用技巧。 传参方式一...
Vue组件间常用传参方式
Tang__CT的博客
04-24 3334
Vue组件间常用传参方式 1. props、emit（最常用的父子通讯方式） 父传子 父组件传入属性，子组件通过props接收，就可以在内部this.XXX的方式使用 // 父组件 <hello-world msg="hello world!"><hello-world> // 子组件 <div>{{msg}}</div> props：['msg'] 子传父 子组件$emit（事件名，传递的参数）向外弹出一个自定义事件，在父组件中监听子组件的自定义
【vue】vue组件传值的三种方式
热门推荐
hello world_
10-22 6万+
前言 vue的组件传值分为三种方式：父传子、子传父、非父子组件传值 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递 父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：   下面我们就开始用代码（一言不合就上代码）详细的介绍vue组件传值的三种方式 1、父传子 子组件的代码： &lt;template&gt; ...
「前端」weex页面传参
weixin_33859231的博客
08-13 178
19年目标：消灭英语！我新开了一个公众号记录一个程序员学英语的历程 有提升英语诉求的小伙伴可以关注公众号：csenglish 程序员学英语，每天花10分钟交作业，跟我一起学英语吧 前言 我司在weex上的应用是保证三端统一，为了延续web开发体验，统一在三端的跳转都采用url的形式，即采用<a>组件，或者自定义的openUrl...
父组件子组件传值：
zhaofeiweb的博客
08-09 634
父组件向子组件传值步骤： 在这里先定义一下，相对本案例来说：App.vue是父组件，Second-module.vue是子组件。   一、首先，值肯定是定义在父组件中的，供所有子组件共享。所以要在父组件的data中定义值：     二、其次，父组件要和子组件有契合点：就是在父组件中调用、注册、引用子组件： 　　调用：   　　注册：   　　引用：   三、接下来...
Vue组件之间的传参方式小总结
weixin_43314255的博客
04-16 1149
学习vue的组件,可能很多人已经了解了组件的创建注册使用,但是随之而来的就是组件之间的通信,父子组件怎么传? 兄弟组件怎么传? 不是父子组件又怎么传? 接下来介绍几种组件之间的传参方式,也是很容易面试被问到的. 1.父传子用props 父组件传递参数给子组件的时候,可以使用props这个属性 <div id="app"> <cpn :cmsg="msg"></cpn> </div> <template id="cpn"> .
Vue 组件之间传值
cherry_zhang18的博客
01-17 2838
Vue 组件之间传值 一、父组件向子组件传递数据 在 Vue 中，可以使用 props 向子组件传递数据。   子组件部分： 这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。 如果需要从父组件获取 logo 的值，就需要使用 props: ['logo'] 在 props 中添加了元素之后，就不需要在 data 中再添加
vue基础语法以及父子组件如何相互传值
zhang5207892的博客
11-05 2万+
vue模板引擎语法，关注数据层面 Mustache语法:{{msg}} 主要是用date控制 html赋值：v-html=”“ 绑定属性：v-bind:id=”“ 使用表达式：{OK?”yes”:”NO”} 文本赋值：v-text=”“ 指令：v-if=”“ 过滤器：{{message|capitalize}}和v-bind:id=”rawId|formatId” class和style绑定 对象
click传值vue_vueclicknativeon(vue click事件传参数)
weixin_34337678的博客
01-14 935
好长的名字。效果是点击元素并改变其颜色，通过改变类名来移动动画效果。这里使用了v-bind和@符号废话！='app'='isOk '？@='ooo2()'这是一个神奇的网站是v-，的缩写，将事件绑定到类，然后用三元表达式判断事件IdOk是一个标志位，类似于第二篇博文写的标志，是一个判断。那么问题来了，怎么判断呢？当时我本来想写函数oo2()//isOk？this . style . clas...
vue中动态组件使用及传值
qwerewf的博客
10-16 2万+
在项目中常常需要切换不同的组件，这时候我们就可以使用vue内置的动态组件的方式来实现。 component 组件：在页面中通过使用component元素，在根据组件中的is属性来动态的切换不同的组件。 demo: <template> //index.vue <div class="contain-wrap"> <input type="button" @click="fatherBtn()" value="点击显示子组件"> <component :
vue组件动态改变传参
07-12
在Vue中，您可以通过以下几种方式来动态改变组件的传参： 1. 使用动态属性绑定：您可以在组件标签上使用冒号(:)来绑定属性，并将属性值设置为一个动态表达式。这样，当表达式的值发生变化时，组件的传参也会相应地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值