精华内容
下载资源
问答
  • vue页面传值

    2019-03-29 16:12:00
     'menu':JSON.stringify(this.menuList), //传值,必须用stringify,否则,跳转页面刷新,数据会消失  }  });  }, } 消息详情页收值: let menuToken = JSON.parse(this.$route.query.menu); ...
    第一种情况:例:消息列表页(路由)跳转:
    methods: {
      goTo(){
        this.$router.push({
          name:'/My/Info',
          query:{
            'tellSeq':this.tableData[index].TellSeq,    //跳路由
            'menu':JSON.stringify(this.menuList),     //传值,必须用stringify,否则,跳转页面刷新,数据会消失
          }
        });
      },
    }
    消息详情页收值:
    let menuToken = JSON.parse(this.$route.query.menu);
     
    第二种情况:例:用户登录(路由)跳转首页
    window.sessionStorage.setItem('userInfo', JSON.stringify(res.data));          //登录接口发通后,存储用户信息到本地缓存;
    created() {
    let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));      //
    登录后,在首页获取用户登录信息:
    }
     
    第三种情况:子组件和父组件之间传值,参考:
         父组件页面,在子组件标签上用v-bind:sendVal="sendVal",子组件在data中用props:['sendVal']接收
         https://www.cnblogs.com/linxin/p/7144123.html
    第四种情况:兄弟组件之间传值:
         可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。
        参考:https://www.cnblogs.com/place-J-P/p/7586819.html
                  https://www.jianshu.com/p/69d53063be7c
     

    转载于:https://www.cnblogs.com/js0618/p/10621946.html

    展开全文
  • VUE页面传值 地址栏显示传值或者不显示 params传值 地址栏不显示(相似post请求参数) 内联代码片。 // 传值 this.$router.push({ params:{要接收的名称: 要传的值} }) // 接收 this.$route.params.要接收的名称. //...

    VUE页面传值 地址栏显示传值或者不显示


    params传值 地址栏不显示(相似post请求参数) 内联代码片

    页面传值/路由跳转 内联代码片

    // 传值结构
    <div @click="fun(123)">点击传值</div>
    

    params传值 地址栏显示(相似post请求参数) 内联代码片

    // params传值
    methods: {
    	fun(data) {
    		this.$router.push({
    			name: '路由地址'
    			params:{name(要接收的名称): data(要传的值)}
    		})
    	}
    	
    }
    
    // 接收页面
    this.$route.params.name(要接收的名称);//123
    //注意点: 传值是this.$router 接收值是this.$route - params要用name来引入
    

    query传值 地址栏显示(相似get请求参数) - 与上同理params替换为query 内联代码片

    // query传值
    methods: {
    
    	fun(data) {
    		this.$router.push({
    			path: '/路由地址'
    			query:{name(要接收的名称): data(要传的值)}
    		})
    	}
    }
    // 接收页面
    this.$route.query.name(要接收的名称);//123
    //注意点: 传值是this.$router 接收值是this.$route - query要用path来引入
    

    VUE页面传值 地址栏显示传值或者不显示。


    组件传值(父传子) 内联代码片

    // 页面内
    <div>
    	<Sidebar :conData="conData" ></Sidebar>
    </div>
    
    <script>
    //获取子组件
    import Sidebar from '../components/Sidebar';
    export default{
    	data(){
    		return{
    			//定义要传输的变量
    			conData: {a:1,b:2}
    		}
    	}
    }
    </script>
    
    
    //组件内
    <template>
    	//定义完成后组件内可以直接使用
    	<div> {{conData}} </div>
    </template>
    <script>
    export default{
    	//定义接收值
    	props: {
    		//定义下类型
    		conData: {
    			type: Object,
    			required: false
    		}
    	},
    	created(){
    		//通过this.$props.name 可以拿到props传输的值
    		console.log(this.$props.conData)
    	}
    }
    </script>
    

    组件传值。

    展开全文
  • HTML页面向Vue页面传值

    2021-02-26 13:55:40
    但是难免会有.html页面vue项目传值的场景。本节将介绍html项目利用JavaScript向vue项目传值。 1:HTML页面传递事件 可以随便写一个用于跳转的事件。如下: <!DOCTYPE html> <html lang="en"> <...

    一些传统的项目一般还是以.html为主。但是难免会有.html页面向vue项目传值的场景。本节将介绍html项目利用JavaScriptvue项目传值。

    1:HTML页面传递事件

    可以随便写一个用于跳转的事件。如下:

    	<!DOCTYPE html>
    	<html lang="en">
    	<head>
    	  <meta charset="UTF-8">
    	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	  <title>Document</title>
    	</head>
    	<body>
    	  <button id = 'btn'>
    	    跳转
    	  </button>
    	  <script>
    	    var btn = document.getElementById('btn')
    	    btn.onclick = function() {
    	    	// 下方为你的vue项目地址。写本节文章时我的.html文件放在vue项目的根目录。
    	    	// ?之后的为你需要传递的参数。采用 key = value形式
    	      	location.href = 'http://localhost:8080/#/?id=123'
    	    }
    	  </script>
    	</body>
    	</html>
    

    2. Vue项目接收值

    html传递过来的参数可以在vue项目中通过this.$route来获取到。

    	// vue项目其他代码不做赘述
    	// 此处传递的为基础数据类型
    	// 可以在created钩子函数下获取
    	created () {
    		console.log(this.$route.query.id)
    	}
    

    3. 如果html传递的是对象参数

    	<!DOCTYPE html>
    	<html lang="en">
    	<head>
    	  <meta charset="UTF-8">
    	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	  <title>Document</title>
    	</head>
    	<body>
    	  <button id = 'btn'>
    	    跳转
    	  </button>
    	  <script>
    	    var btn = document.getElementById('btn')
    	    const person = {
    	    	id: 1,
    	    	name: 'john'
        	}
    	    btn.onclick = function() {
    	    	// 下方为你的vue项目地址。写本节文章时我的.html文件放在vue项目的根目录。
    	    	// ?之后的为你需要传递的参数。采用 key = value形式
    	      	location.href = 'http://localhost:8080/#/?obj=' + JSON.stringify(person)
    	    }
    	  </script>
    	</body>
    	</html>
    

    4. vue项目中接收对象参数的值

    	// vue项目其他代码不做赘述
    	// 此处传递的为基础数据类型
    	// 可以在created钩子函数下获取
    	created () {
    		console.log(JSON.parse(this.$route.query.obj))
    	}
    

    注意:上面的是 this.$route 。而不是this.$router
    两者区别:

    • this.$rotuer 为全局路由对象。包含很多属性和方法。任何页面都可以使用push()replace()go()等方法。
    • this.$route 为当前路由对象。每一个路由都会有一个route对象。里面包含当前路由的namepathqueryparams等属性。
    展开全文
  • Vue页面传值方式总结

    千次阅读 2019-06-25 11:34:53
    1.父子组件传值 父组件通过components引入子组件,子组件通过props接收 子组件通过调用父组件方法实现通信 this.$emit(…) 父组件 <template> <div> <parent> <child :value="msg" @...

    1.父子组件传值

    • 父组件通过components引入子组件,子组件通过props接收
    • 子组件通过调用父组件方法实现通信 this.$emit(…)
    父组件
    <template>
      <div>
        <parent>
          <child 
          :value="msg"
          @func="show">
          </child>
        </parent>
      </div>
    </template>
    <script>
    import Child from "..."
    export default {
      data () {
        return {
          msg:'父组件的值传给子组件'
        }
      },
      components: {Child},
      methods: {
      	show(msg){
      	console.log(msg)
      	}
      }
    }
    </script>
    
    子组件
    <template>
      <div>
        <p>这是子组件 -> 获得值:{{value}}</p>
        <br>
        <button @click="clickEvent">点击按钮</button>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
           msg:"子组件的消息"
        }
      },
      components: {},
      props: ['value'],
      mounted () {},
      methods: {
      clickEvent(){
      this.$emit('func',this.msg);
       }
      }
    }
    </script>
    

    2.路由跳转时传参

    • 传参是 router , 接收参数是 route !
    • 传参是 router , 接收参数是 route !
    • 传参是 router , 接收参数是 route !

    2.1 router-link to不传参 -> :to传参

           <router-link :to="'/url/' + id"> <router-link/>
    
    • js中参数接收
       id: this.$route.params.id
    

    2.2 编程式页面跳转

            this.$router.push("home:)       前往/home的页面
    
    • push、replace区别
      push 可以返回上一步 replace 不能

    编程式页面跳转时传参

    params 传参 : 相当于post请求,页面跳转时参数不会在地址栏中显示

     this.$router.push({
         name:'home',
         params: { id:idParams }
     })
    
    • 接收参数:
    this.$route.params.id
    

    query 传参 : 相当于get请求,页面跳转时参数会在地址栏中显示

    this.$router.push({
        name:'home',
        query: { id:idParams }
    })
    

    接收参数:

    this.$route.query.id
    
    展开全文
  • 两个页面之间通过Vuex进行传值 store代码: import Vue from 'vue' import router from '@/router/routes' import Layout from '@/modules/layout/Layout' import NestRoute from '@/modules/layout/NestRoute' ...
  • 前言.父子组件之间的通信vue提供了更直接的方式,此处不细说,不会的可以去官网研读文档。但是官方没有提供直接的方法用于兄弟组件之间的...但是也更为庞大,所以一般简单的传值问题可用于vue-bus解决1.vue-bu官网地...
  • 上一篇文章分享了组件的基本使用及父组件向子组件传值的内容,这次继续分享子组件向父组件(或父级页面)传值;参考官方文档链接:...
  • vue 页面传值的几种方式

    千次阅读 2020-01-14 11:26:57
    1 拼接url传值 2 query 传值(类似get请求,URL显示在地址栏) 3 params 传值(类似post请求) https://blog.csdn.net/chenzlyan/article/details/83306199
  • Vue页面传值;路由跳转

    2019-10-25 15:00:56
    A.vue-----B.vue A.vue <el-col :span="5"> <div class="rightsBox" @click="toRights('科技论坛')"> <span class="displayBlock marginTop10">科技论坛</span> </div> </el-.....
  • 说起Vue页面传值,大家都会想到的是路由的三种传值方式, 二.我们看列表详情也有两种方式,一种是通过弹窗的形式el-dialog,一种是通过路由跳转新页面的方式, 三.记住新页面详情,往往需要我们先把我们点击所属列表...
  • vue 页面传值 手机号隐藏

    千次阅读 2017-07-21 14:50:18
    分享给大家: 1.路由main.js { path: '/register-success/:user_name', name: 'register-suc', component: RegisterSuccess ...在注册的页面,带参数 self.$router.push({name: 'register-suc', params: {u

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,469
精华内容 587
关键字:

vue页面传值

vue 订阅