vue多页面引入同一组件,传入不同值

最新推荐文章于 2023-11-20 14:40:47 发布
最新推荐文章于 2023-11-20 14:40:47 发布
阅读量1.9k 收藏 7
点赞数
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SYXZSs/article/details/119751135
版权

这里直接开始，我是新创建了一个vue小demo项目，利用Helloworld组件实现

创建好之后，对About页面也引入Helloworld组件，并注册使用

在这里插入图片描述

接下来我们修改 msg的值，改成绑定形式
在这里插入图片描述
home页面的msg的内容是：msg: “Welcome to Your Home.Vue”。对不同页面的msg的值，并做出不同的修改，是用于区分的

在Helloworld组件，改变传值的写法。
default是默认内容，用于在其他页面引入时，不传值的时候，显示的内容。
在这里插入图片描述

运行效果：在这里插入图片描述
上下为 home 页面和 about 页面
在这里插入图片描述

接下来添加一个数据：

数组data

在这里插入图片描述
在这里插入图片描述

运行效果如下：
在这里插入图片描述

当我们再写一个My.vue页面，引入helloworld组件，不传值时：

在这里插入图片描述
下面图片就是Helloworld组件，默认显示的内容。（如上图的引入不传值）

在这里插入图片描述

效果：

在这里插入图片描述

不要睡觉哦i
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 组件间传值及事件触发Demo
09-07
本教程将详细讲解如何在Vue组件间进行值传递以及事件触发，帮助你更好地理解并运用这些概念。 一、组件间传值 1. `props` 下传：父组件向子组件传递数据是最常见的传值方式，通过在子组件定义`props`属性接收父...
Vue 60 道面试题及答案.docx
07-09
Vue作为渐进式框架，意味着你可以根据项目需求逐步引入不同层级的功能，从基础核心到完整的生态。 16. **单页应用（SPA）与多页应用（MPA）** - **SPA**：只有一个主页面，所有页面切换都在同一页面上完成，加载...
Vue中父组件以及子组件传值问题
热门推荐
凭时间赢来的东西，时间肯定会为之作证
11-24 11万+
前言：在一些页面中不单单的纯纯的一个vue文件，vue讲究组件化开发，但是一般的肯定会产生交互事件，今天了解了这个传值，特此的来记录一下。 目录一.父组件向子组件传值二.子组件向父组件传值 一.父组件向子组件传值 父组件向子组件传值会用到：Prop，一般的我们需要在子组件中进行相关的声明，如下所示： 子组件为HellowWorld.vue <script> export default { name: 'HelloWorld', //接收的变量 props: { //声明相关的
VUE-多个页面引用同一组件，但组件宽度不同时，使用directive指令指定宽度值
LzzMandy的博客
06-25 2240
功能说明： 1、上部分tab 标签是一个组件component:{ tabCom}； 2、下部分查询条件是一个组件component:{ searchCom }，而输入框作为一个单独的组件component:{ inputCom }嵌套在search组件中； 3、在不同的tab 标签下，输入框的宽度不同，如【通讯录】下100%，【物资库】下50% 界面dom： 1、通讯录、物资库d...
vue多个页面引用相同组件 在一个页面修改css 多个页面受影响
weixin_51418516的博客
07-29 1373
在引用的页面的style标签里加上scoped，被引用的组件的style标签也要写上scoped即可。
vue组件多种传值方式
weixin_45532305的博客
03-09 902
简单、高效、不重复，是特殊Vue实例，，每个组件是一个独立的运行环境，组件的数据一般只能自己使用 场景: 重复的**页面结构,数据,逻辑** 都可以抽提成一个**组件** ​组件分为普通组件和路由级组件，组件是私有作用域 注册全局组件 ​ Vue.component(“组件名称”,，组件对象) ​ 在任何实例化的地方都能使用 //注册全局组件,应放在Vue实例化之前，在Vue全局构造函数中创建一个...
在vue单页中重复引入同一子组件
hello world
04-23 5503
如果一个功能服用率比较高，我们一般写成一个公共组件，需要的时候就引入 今天遇到一个问题，写了一个城市级联选择器的公共子组件，我在一个页面引入了三个该组件，发现只有一个能够使用，拿代码说事 下面代码是我城市选择器的一部分，我将getProvince方法在created中执行，因此只要打开引入该组件的页面，方法中的请求就会发送，结果是三个组件中的其中两个console.log(res) 输出为un......
vue在同一个页面重复引用相同组件如何区分二者
铭净止水的博客
05-23 2万+
1.使用情境：我在同一个vue中引用了同样的一个图层选择的组件，需要区分二者的选择的radio值，如果不做区分，这二者选择的radio值看上去将会一样 2.解决方法： 先说原理，这个重复引用的组件虽然一样，但是二者在被创建的时候各自走了一遍生命周期，所以变量之间不冲突。 首先在引用组件中新增一个props，这里命名为spareId,用来区分二者。 然后父组件传值： 然后在子组件raido中引入这个spareId： 这样就能区分二者选择的不同值。 原理是这样，也可根据实际..
Vue自定义全局弹窗组件操作
10-14
Vue自定义全局弹窗组件操作是一项常见的前端开发...这种做法提高了代码的组织性和可维护性，使得在多个场景下复用同一弹窗组件变得非常简单。同时，通过参数配置，可以实现各种不同的弹窗效果，满足不同场景的需求。
vue2-router-source-code-learning:vue2-router源码学习
05-01
9. **命名视图（Named Views）**：在同一层级上可以定义多个命名的视图，允许在一个路由下显示多个组件。 10. **路由元信息（Meta）**：可以在路由配置中添加元信息，用于自定义行为，如页面标题、权限控制等。 11...
生成前端开发
02-26
- 函数重载：允许多个函数签名共享同一函数名，根据传入参数的不同执行不同的逻辑。 - 泛型（Generics）：提高代码的复用性，允许创建适用于多种类型的函数或类。 2. **前端框架与库** - Angular、React和Vue是...
Vue2—Echarts 相同页面、相同组件、显示不同数据
最新发布
weixin_53035812的博客
11-20 197
【代码】Vue2—Echarts 相同页面、相同组件、显示不同数据。
vue跳转到同一路由但传递参数不同，从而判断页面显示内容
weixin_48669322的博客
04-15 1435
vue跳转到同一路由但传递参数不同，从而判断页面显示内容
Vue中关于组件传值的知识点
weixin_46419373的博客
04-26 578
Vue组件传值在日常开发中比较常见，在官方文档里面也有介绍，但是对于新手理解起来会有一点生涩。所以今天就把Vue组件传值拉出来写一次，方便新手理解和自己的记忆。 一般有三种传值方式：1.父传子、2.子传父、3.兄弟组件之间通信 1、Vue中父组件向子组件传值 一般会在子组件里面定义props来做接收父组件的值，通常是比较常见的。 父组件（在这里，父组件的名字是：Main.vue） <te...
Vue全局添加组件
11wy11的博客
03-14 643
一. 背景 在项目中有时需要反复用到如区域选择器等组件，每次使用时都需要在对应的vue中添加import,并在component中注册，为了避免多次书写引用代码，可以自定义全局组件，只需要在main.js中一次性注册在vue项目中，可以自定义组件像vue-resource一样使用Vue.use（）方法来使用。 二. 具体实现方法 1、首先建一个自定义组件的文件夹，比如叫loading，在该文件夹下...
vue跳转同一个组件，参数不同，页面接收值知接收一次
weixin_43958683的博客
05-14 4334
作为vue的初用者，你可能会像我一样遇到一个问题，对跳转组件是，我们想通过参数不同，调用不同的方法。 例如： app.vue <ul> <li class="navList" v-for="index in goods" :key="index.name"> <router-link :to="{path:in...
vue两个完全相同页面，不同参数的处理方案
qq_42339350的博客
07-27 2139
使用watch是因为如果直接从页面1到页面2，created是不会执行的。
同一个页面跳转显示不同的数据
weixin_44227650的博客
09-23 1530
同一个页面跳转显示不同的数据 1.最近在做一个需求的时候有涉及到不同页面的同一个按钮在同一个页面显示不同的数据，大概的起因是A页和B页的大体数据和模板是一样的，但是在B.JSP页面的一些数据是只需要进行只读的。（B页是显示不同数据的jsp页面），本来是打算在创建一个页面C.JSP，把B.jsp的数据迁移过去，然后对部分数据进行只读。但是后面想着如果创建很多的jsp，会导致资源浪费，还有就是创建多个jsp页面到后来自己都有点晕，所以就想到去在同一个jsp页面去显示不同的数据。 2.步骤如下： 1）.先在A 页
vue 公用组件展示问题
m0_61004873的博客
05-06 563
最近一个项目碰到这样一个问题，封装了一个自定义时间组件，通过点击事件控制组件的show：true/false，在一个页面中多次用到这个子组件，当点击其中一个子组件的时候，组件show:true,点击另一个子组件的时候，刚才点击的那个子组件show还是为true，这就造成了页面多个相同子组件同时展示的问题。正确的应该是点击当前的时间子组件，别的应该关闭。 解决方法：组件通信--eventBus 在src下建立一个文件夹，文件夹下新建一个名为eventBus.js的文件夹。（也可以直接在使用页面直接new一
vue页面引入多个组件
05-19
可以在Vue页面中引入多个组件，有两种方式： 1. 直接在Vue组件中注册 ```vue <template> <div> <my-component1></my-component1> <my-component2></my-component2> </div> </template> <script> import MyComponent1 from "./MyComponent1.vue"; import MyComponent2 from "./MyComponent2.vue"; export default { components: { MyComponent1, MyComponent2 } }; </script> ``` 2. 在Vue组件中通过路由懒加载方式引入 ```vue <template> <div> <router-view></router-view> </div> </template> <script> export default { name: "App", components: {}, created() {} }; </script> ``` 在路由配置文件中引入： ```javascript import Vue from "vue"; import Router from "vue-router"; const MyComponent1 = () => import("./MyComponent1.vue"); const MyComponent2 = () => import("./MyComponent2.vue"); Vue.use(Router); export default new Router({ routes: [ { path: "/", name: "Home", component: MyComponent1 }, { path: "/about", name: "About", component: MyComponent2 } ] }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值