勤奋鸟旗下 软件定制开发 安全交付平台!一次合作,终身售后!全程项目经理一对一跟进测试!公司以自研团队结合搭档圈,为用户提供安全快速稳定的软件源码开发服务!

vue项目各页面间的传值

2024-09-04 16:59:16
复制链接

3599

vue

vue各页面间的传值

一、父子之间主键传值:(主要是在父主件里的子主件传递参数,然后再子主件里用props接收)

 例如Father.vue

template>
div class="father">

Son :value="123456" title="hello" :inputVal="val" 
@sendData="testAction">
Son>

button @click="testAction()">按钮button>

div> 
template>

script>
import Son from './Son.vue'
export default {
components: {
Son
},
data(){
return {
message: 'hello vue',
val: '12345'
}
},
methods: {
sendAction(){
this.val = this.$refs.in.value;
}
}
}
script> 

例如Son.vue 

export default {
//接收组件标签上的属性
//外部属性,只能访问,不能修改
// 单向数据流:保证数据是自顶向下的
// props: ['value', 'title']
props: {
value: Number,
title: String,
inputVal: String
},
//内部属性
data(){
return {
name: this.title
}
},
methods: {
modify(){
this.name = 'world';
},
sendAction(){
let value = this.$refs.in.value;

//调用click事件
// 触发组件标签上的自定义事件
// 参数1:事件名字
// 参数2:传递的值sendData
this.$emit('sendData', value, 1,2,3,4,5);
}
}

第二、非父子组件间的父子传值

   1.首先:
   第一种:
   main.js: 
   import Vue from 'vue'
   import App from './App.vue' 
   给Vue实例化添加一个$center的方法 
   Vue.prototype.$center = new Vue();
   第二种:
   main.js
import Vue from 'vue'
import App from './App.vue'  
import center from './center' 

Vue.prototype.$center = center; 

const vm = new Vue({
    el: '#app',
    render: h=>h(App)
})
center.js文件:

export default {
    $on: function(eventName, callback){
        // 根据事件名字获得了回调
        // 保存所有的回调函数
    },
    
    $emit: function(eventName, ...rest){
        // 根据事件名字,调用对应的回调函数
        // 调出来之前保存的相同事件名字的回调函数,一个一个执行。
    },
    $off: function(){       
    }
}
    ba.vue文件:
methods: {
        //发送事件:(触发事件发送参数)
        sendAction(){
            console.log(this.value);           
            //触发事件
            this.$center.$emit('send-data', this.value);
        }
    }
 bb.vue文件:(接收参数)

created() {
        // 监听事件
        this.$center.$on('send-data', this.listener);
    },
beforeDestroy(){ 
        console.log('组件销毁前');
        //移除监听
        this.$center.$off('send-data', this.listener);
    }

三.页面跳转通过路由带参数传递数据

// 1.页面中的代码
this.$router.push({
    name: 'generalAdminOrderFlowAdd',
    params: {
      type: 'add',
      templateType: this.orderTemplateType
     }
 })
或

this.$router.push({
        name: 'routePage',
        query/params: {
        routeParams: params
       }
})

需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题这样使用起来很方便,但url会变得很长,而且如果不是使用路由跳转的界面无法使用

   2.路由中的代码
{
   path: ':type/:templateType',
   name: 'generalAdminOrderFlowAdd',
   component:   require('@/components/generalAdmin/order/orderFlow')
}
  3.获取页面中的参数值
 let type = this.$route.params.type
17330196230 13230981129

多线程同步开发
项目经理1v1跟进
源码定制交付
一次合作/终身售后

微信扫码登录/注册

提示

您的诉求已经提交请等待工作人员联系,快速通过请联系管理员

微信扫一扫快速联系

用户协议

欢迎访问我们的网站!我们非常重视用户的隐私权和信息安全,因此制定了以下用户协议,以明确我们与您之间的关系以及您在使用本网站时应遵守的条款。请您仔细阅读并同意本协议的所有条款,以便您能够合法、安全地使用本网站。如果您不同意本协议的任何内容,请立即停止使用本网站。

  1. 服务说明:本网站是一个提供定制软件开发服务和在线找技术搭档的互联网平台。我们保留随时更改、更新或暂停本网站的权利。我们会尽力确保网站的正常运行,但对于因技术问题、系统维护或其他原因导致的网站暂时不可用,我们不承担任何责任。

  2. 用户注册:用户需要通过提供手机号、微信扫码和其他必要信息来注册一个账户。您有责任保护您的用户名和密码,不得将其透露给任何第三方。对于因您的用户名和密码被泄露而导致的任何损失或损害,我们将不承担责任。

  3. 用户行为规范:用户应遵守中华人民共和国相关法律法规,不得发布或传播违法信息、侵犯他人权益的内容。用户应对其发布的内容负责,并承担因发布不当内容而引起的任何法律责任。

  4. 版权声明:本网站所包含的所有文字、图片、音频、视频等素材的著作权均归本网站所有(会员用户上传的默认承诺为不侵权的合法自有技术成果,本网站审核信息后可展示,所有权不归本网站)。未经本网站书面许可,任何单位或个人不得以任何形式复制、转载、修改或传播本网站的任何内容。对于侵犯本网站知识产权的行为,将依法追究其法律责任。

  5. 免责声明:本网站不对因使用本网站而引起的任何直接、间接、偶然、特殊或后果性的损害承担责任。包括但不限于利润损失、数据丢失、业务中断等。

  6. 适用法律和争议解决:本协议的签订、履行、解释及争议解决均适用中华人民共和国法律。如发生争议,双方应首先协商解决;协商不成的,任何一方均有权向有管辖权的人民法院提起诉讼。

  7. 本协议的解释权归本网站所有。如有未尽事宜,本网站保留最终解释权。

  8. 本协议自用户点击“同意”或“接受”按钮时生效。

同意

隐私政策

欢迎访问我们的网站!我们致力于为您提供一个安全、可靠的在线环境。本隐私政策旨在说明我们在您使用我们的网站时如何收集、使用和保护您的个人信息。请仔细阅读以下内容,以了解我们的隐私政策。

  1. 信息收集

在使用我们的网站时,我们可能会收集以下类型的信息:

a) 个人识别信息:如姓名、电子邮件地址、电话号码等。 b) 非个人识别信息:如浏览器类型、操作系统、设备类型、IP地址等。 c) 用户行为信息:如访问页面、点击链接、搜索查询等。

  1. 信息使用

我们收集的信息将用于以下目的:

a) 提供、改进和个性化我们的服务。 b) 与您联系,回应您的询问和请求。 c) 发送您请求的或我们认为对您有帮助的信息。 d) 进行市场调研和分析,以改进我们的产品和服务。 e) 防止欺诈和其他非法活动。

  1. 信息共享

我们不会出售、出租或以其他方式与第三方共享您的个人信息,除非:

a) 获得您的明确同意。 b) 与可信赖的合作伙伴共享,以提供您请求的服务。 c) 根据法律要求或政府机关的要求。 d) 为保护我们的权利、财产或安全。

  1. 信息安全

我们采取合理的安全措施,以保护您的个人信息不受未经授权的访问、披露、更改或破坏。然而,请注意,没有任何一种电子存储方法是100%安全的。

  1. Cookie和跟踪技术

我们的网站使用Cookie和类似的跟踪技术来收集有关您使用我们网站的信息。这些信息有助于我们分析和改进我们的网站,以及提供个性化的内容和广告。您可以通过浏览器设置拒绝接受Cookie,但这可能会影响您使用我们网站的能力。

  1. 第三方链接

我们的网站可能包含指向其他网站的链接。请注意,我们对其他网站的隐私政策和实践不承担任何责任。我们建议您在访问这些网站时查看其隐私政策。

  1. 隐私政策的变更

我们可能会不时更新本隐私政策。请定期查看此页面,以确保您了解我们对个人信息的最新政策。

  1. 联系我们

如果您对我们的隐私政策有任何疑问或建议,请通过以下联系方式与我们联系:

电子邮件:[wangye-101@163.com]

电话:+86-173-3019-6230

地址:中国石家庄市长安区吾悦广场2010室

感谢您的信任和支持!我们将竭诚为您提供更优质的服务。

同意