15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

vue项目各页面间的传值

梁鹏翱| 发布于 2021-11-03 08:46:56| 509阅读| 0点赞| 0评论
举报

实现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
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

梁鹏翱
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部