传值_传值调用 - CSDN
精华内容
参与话题
  • 利用地址栏URL传值 A页面传值 <input type="text" id="txt"> </br> <input type="button" value="TEST" onclick="test()"/> <SCRIPT LANGUAGE="JavaScript"> function test(){ ...

    利用地址栏URL传值

    A页面传值

     

    <input type="text" id="txt">
    
    </br>
    
    <input type="button" value="TEST" onclick="test()"/>
    
    
    <SCRIPT LANGUAGE="JavaScript">
    function
     test(){       
    var s =document.getElementById("txt");
    location.href="2.html?"+"txt="+encodeURI(s.value);
     }
    
    </SCRIPT>

     

     

    B页面接受并打印

     

     

      <script language="javascript" type="text/javascript">
    var loc=location.href;
    var n1=loc.length;//地址的总长度
    var n2=loc.indexOf("=");//取得=号的位置
    var id=decodeURI(loc.substr(n2+1, n1-n2));//从=号后面的内容
    alert(id);//
    document.write(id)
    
      </script>

     

    注意:这个URL例子比较简单,如需看更深入的例子请点击链接转移!

     

    名称:JS获取URL中参数,支持多参数传值,支持中文

     

    url:http://blog.csdn.net/cplvfx/article/details/78653304
     

     

    利用H5 Web 存储 传值

     

    A页面传值

     

    <h1>利用HTML5 Web 存储 localStorage</h1>
    <div onclick="save(1)">添加1</div>
    <div onclick="save(2)">添加2</div>
    <div onclick="save(3)">添加3</div>
    <div onclick="save(4)">添加4</div>
    <div onclick="save(5)">添加5</div>
    <div onclick="find()">查找</div>
    
    <div id="find_result"></div>
    
    <script>
    if(typeof(Storage)=="undefined")
    {
      document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
    }
    //保存数据  
    function save(cp_value){  
    	var num = new Object;
        num.cp_keynum ="key_num";  
        num.cp_num_value = cp_value;
        var str = JSON.stringify(num); // 将对象转换为字符串
        localStorage.setItem(num.cp_keynum,str);
        alert("添加成功");
    }
     //查找数据  
    function find(){  
        var cp_keynum = "key_num";  
        var str = localStorage.getItem(cp_keynum);  
        var find_result = document.getElementById("find_result");
        var num = JSON.parse(str);  
        find_result.innerHTML = cp_keynum + "==" + num.cp_num_value;  
    }  
        
    </script>
    

     

    B页面接受并打印

     

    <h1>利用HTML5 Web 存储 localStorage</h1>
    <div onclick="find()">查找</div>
    <div id="find_result"></div>
    <script>
    if(typeof(Storage)=="undefined")
    {
      document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
    }
    
     //查找数据  
    function find(){  
        var cp_keynum = "key_num";  
        var str = localStorage.getItem(cp_keynum);  
        var find_result = document.getElementById("find_result");
        var num = JSON.parse(str);  
        find_result.innerHTML = cp_keynum + "==" + num.cp_num_value;  
    }  
        
    </script>

     

     

    利用JavaScript Cookie存储 传值

    (

    cookie储存是需要服务器支持的,

    本地直接运行静态文件是实现不了的,

    需要给静态文件搭建服务器支持;

    例如:打开后的地址栏为

    http://192.168.1.5:809/2.html

    )

    A页面传值

     

    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <title>无标题文档</title>
    <style>
    	div{ height: 36px; line-height: 36px; border: #eee solid 1px; margin: 10px;}
    </style>
    <script>
    	
    	
    //添加 cookie
    function cp_add_cookie(num){
    setCookie("cp_keynum",num,2);
    }
    //查找
    function cp_seek_cookie(){
    var cp_keynum=getCookie("cp_keynum");
    var find_result = document.getElementById("find_result2");
    find_result.innerHTML = "cp_keynum == " + cp_keynum;  
    }
    
    
    //设置 cookie 值的函数,创建一个函数用于存储访问者的名字
    function setCookie(cname,cvalue,exdays){
    	var d = new Date();
    	d.setTime(d.getTime()+(exdays*24*60*60*1000));
    	var expires = "expires="+d.toGMTString();
    	document.cookie = cname+"="+cvalue+"; "+expires;
    }
    //获取 cookie 值的函数,创建一个函数用户返回指定 cookie 的值
    function getCookie(cname){
    	var name = cname + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0; i<ca.length; i++) {
    		var c = ca[i].trim();
    		if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    	}
    	return "";
    }
     
    </script>
    </head>
    <body>
    <h1>利用JavaScript Cookie存储 </h1>
    <div onclick="cp_add_cookie(1)">添加1</div>
    <div onclick="cp_add_cookie(2)">添加2</div>
    <div onclick="cp_add_cookie(3)">添加3</div>
    <div onclick="cp_seek_cookie()">查找</div>
    <div id="find_result2"></div>
    
    </body>

     

     

     

     

     

     

    B页面接受并打印

    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <title>接受数据</title>
    <style>
    	div{ height: 36px; line-height: 36px; border: #eee solid 1px; margin: 10px;}
    </style>
    <script>
    	
    	
    //查找 cookie
    
    function cp_seek_cookie(){
    var cp_keynum=getCookie("cp_keynum");
    var find_result = document.getElementById("find_result2");
    find_result.innerHTML = "cp_keynum == " + cp_keynum;  
    }
    
    //获取 cookie 值的函数,创建一个函数用户返回指定 cookie 的值
    function getCookie(cname){
    	var name = cname + "=";
    	var ca = document.cookie.split(';');
    	for(var i=0; i<ca.length; i++) {
    		var c = ca[i].trim();
    		if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    	}
    	return "";
    }
     
    </script>
    
    </head>
    <body>
    <h1>利用JavaScript Cookie存储 </h1>
    <div onclick="cp_seek_cookie()">查找JavaScript Cookie存储的值</div>
    <div id="find_result2"></div>
    </body>

     

     

     

     

     

     

     

     

     

    【文件下载】

    js实现页面与页面之间传值,js利用地址栏URL传值,利用H5 Web 存储 传值,利用JavaScript Cookie存储 传值

     

     

    http://download.csdn.net/download/cplvfx/9896595

     

     

     

    展开全文
  • 管理系统前后台之间的传值尤为关键,很多时候我们前台显示的数据要通过连接后台的数据库并从数据库中获得,更多的时候我们需要把前台对数据库的修改传递到后台以便完成对数据库的修改。其中我们最长使用的传值方式有...

    管理系统前后台之间的传值尤为关键,很多时候我们前台显示的数据要通过连接后台的数据库并从数据库中获得,更多的时候我们需要把前台对数据库的修改传递到后台以便完成对数据库的修改。其中我们最长使用的传值方式有三种。

    1、使用表单POST传值,直接使用表单的action属性(登陆,增加土地,计划等功能的实现)即可。

    当点击type为submit的按钮时,则自动把表单的数据使用POST的方式提交到add.php,

    这里需要特别注意,当表单中(在<form></form>)的button按钮没有设置type时,会自动将表单数据提交到php后台,所以如果想要使用<button></button>标签实现类似于取消的功能,一定记得将type设置为button。这个问题我们两个一起找了好久,才找到问题所在。

    2、其次GET方式传值,直接通过URL地址传值,例如这里的输入数据模糊查询数据的功能,把值带到php的URL之后也可实现前后端的传值。               

     

    3、还有SESSION和COOKIE传值。比如在每个界面需要判断cookie来实现不同的类型的用户不同权限的显示。下面时根据农场主和技术人员不同身份,显示不同的功能的部分代码。

    4、使用AJAX可以更方便的把js获取到的数据传递给php处理,比如在修改条目时,可以方便的获取每个js获取到的值并传到后台。type:请求的类型,这里必须用post 。WebMethod方法只接受post类型的请求。 contentType:发送信息至服务器时内容编码类型。我们这里一定要用 application/json 。 url:请求的服务器端处理程序的路径,格式为"文件名(含后缀)/方法名" ,data参数列表。这里的参数一定要是json格式的字符串,如果你写的不是字符串,那jquery会把它实序列化成字符串,那么在服务器端接受到的就不是json格式了,且不能为空,即使没有参数也要 写成"{}"。dataType:服务器返回的数据类型。success:请求成功后的回调函数。你 可以在这里对返回的数据做任意处理。

    前台ajax传递代码,更新后要使用location.reload()更新前台显示的数据。防止后台数据库的数据不能及时的被用户看到。

    Php只需正常使用POST接收数据。

    并且使用以下代码把需要传送给前台组成json数据回送给前台实现前后台数据的交互。

    Ajax再通过success:function(msg){}来实现对php传回的json数据的处理,可以做显示,输出等各种方式的处理,使用error:function(){}进行错误处理,这里可以弹出失败信息,请求用户重试。

    展开全文
  • 分享三种常用的页面传值方法

    千次阅读 2016-11-24 17:58:31
    本篇文章罗列了三种页面之间的传值方式(实际当然不止三种啦^_^),也是博主认为比较常用的方法,没有什么花俏,但是几乎每个app里面都要用到所谓的传值。所以,今天将这三种方法写下来,一来记录自己的开发生涯,二...

    本篇文章罗列了三种页面之间的传值方式(实际当然不止三种啦^_^),也是博主认为比较常用的方法,没有什么花俏,但是几乎每个app里面都要用到所谓的传值。所以,今天将这三种方法写下来,一来记录自己的开发生涯,二来可以和广大初学者交流共勉。

    工程中创建了一个NavgationController,它的rootViewController是ViewController,另外再创建一个SubViewcontroller作为要push的子页面,整个工程搭建就是这样,下面上代码。

    第一种:Block反向传值

    Viewcontroller.m

    #import "ViewController.h"
    #import "SubViewController.h"
    
    @interface ViewController ()
    {
        UILabel *label;
    }
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        self.navigationItem.title = @"first";
        
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [btn setFrame:CGRectMake(30, 200, 80, 30)];
        [btn setTitle:@"button" forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [btn setBackgroundColor:[UIColor grayColor]];
        [self.view addSubview:btn];
        [btn addTarget:self action:@selector(buttonTouch) forControlEvents:UIControlEventTouchUpInside];
        
        label = [[UILabel alloc] initWithFrame:CGRectMake(90, 300, 200, 50)];
        label.layer.borderColor = [UIColor grayColor].CGColor;
        label.layer.borderWidth = 1.5;
        label.textAlignment = NSTextAlignmentCenter;
        [self.view addSubview:label];
    }
    
    Viewcontroller中创建一个btn,做点击时push子页面用,下面创建一个label,等待接收我们传入的text值。


    SubViewcontroller.h

    #import <UIKit/UIKit.h>
    
    typedef void(^Test)(NSString *str);  		 //block
    @interface SubViewController : UIViewController
    @property (nonatomic, strong) NSString *navTitle;
    @property (nonatomic, strong) Test test;
    @end
    在子页面SubViewcontroller.h中声明我们需要的block,返回值为void,带有一个NSString类型的参数str,navTitle是从Viewcontroller传入的,做为子页面导航栏的标题(正向传值),test即为我们创建的回调对象。

    接下来是主页面btn方法的实现

    - (void)buttonTouch
    {
        SubViewController *subVC = [[SubViewController alloc] init]; //1
        subVC.navTitle = @"second";				//2
        subVC.test = ^(NSString *text){ 			//3
            label.text = text;    
        }; 						//4
        [self.navigationController pushViewController:subVC animated:YES];  //5
    }
    点击首页面btn,代码执行顺序如上所标,label.text = text;是回调中的方法,只有触发回调才会执行,并且传入的参数会保存在text中,随后赋值给label.text。如果回调没有触发则label.text = text;将永远不执行。

    @implementation SubViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        self.navigationItem.title = self.navTitle;
        self.view.backgroundColor = [UIColor whiteColor];
        
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [btn setFrame:CGRectMake(30, 200, 80, 30)];
        [btn setTitle:@"subButton" forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [btn setBackgroundColor:[UIColor grayColor]];
        [self.view addSubview:btn];
        [btn addTarget:self action:@selector(subButtonTouch) forControlEvents:UIControlEventTouchUpInside];
    }
    
    - (void)subButtonTouch
    {
        self.test(@"value1");   //触发回调
    }


    子页面同样放置一个btn,点击时触发回调并传入字符串@“value”,然后返回首页就看到label已经被赋值了。


    第二种:我也不知道叫什么名字好。。

    原理很简单,在首页面写下一个setLabelText:方法,当页面跳转时,将首页的self和setLabelText:传入子页面并保存,随后在子页面点击btn时,调用接收到的”self“(不是子页面self)调用接收到的方法即可,这样就相当于在子页面的时候操作了主页面的对象。

    @property (nonatomic, strong) id myTarget;
    @property (nonatomic, assign) SEL mySelector;
    在子页面.h文件创建接收首页对象和方法的对象(表达很绕口)

    - (void)buttonTouch
    {
        SubViewController *subVC = [[SubViewController alloc] init];
        subVC.navTitle = @"second";
        subVC.myTarget = self;
        subVC.mySelector = @selector(setLabelText:);
        [self.navigationController pushViewController:subVC animated:YES]; 
    }

    - (void)setLabelText:(NSString *)text
    {
        label.text = text;
    }


    首页的改动,新增setLabelText:方法作为参数传递到子页面。

    - (void)subButtonTouch
    {
        [self.myTarget performSelector:self.mySelector withObject:@"value2"];
    }

    子页面btn点击方法只需一句,有警告但不影响程序运行。


    第三种:通知

    通知就更简单了,举个例子帮助大家理解。有一座山,山顶和半山腰各站着一个人,山顶的人大喊一声,这时整个山周围都听得到,当然半山腰的那个人页听到并回应了山顶的人,这样他们两人之间就做了一次消息的传送。实际中,这座山就是我们的app,山顶的人就是通知的发出者,通知遍布整个app,可以存在于app任何地方;半山腰的人就是通知的接受者之一,接收到通知后就执行相应的代码。

    注意:1.通知一旦发送,整个app都可以检测到

       2.可以同时发送多个通知,但每个通知命名不能相同

       3.同一个通知可以被多个观察者监听,一个观察者只能监听一个通知


    - (void)subButtonTouch
    {
        [[NSNotificationCenter defaultCenter] postNotificationName:@"label_text_notifiction" object:self userInfo:@{@"test":@"value3"}];
    }
    只需要在子页面btn点击时发送一个名为label_text_notifiction的通知,附带参数为键值对test = value3。

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(recieveNotifiction:) name:@"label_text_notifiction" object:nil];

    在首页的viewDidLoad中创建监听者,注意通知命名要相同

    - (void)recieveNotifiction:(NSNotification *)noti
    {
        NSDictionary *dic = noti.userInfo;
        NSString *str = [dic objectForKey:@"test"];
        label.text = str;
    }

    将附带参数解析出来赋值给label.text。

    - (void)dealloc
    {
        [[NSNotificationCenter defaultCenter] removeObserver:self];
    }
    最后一定记得移除监听。


    总结:前两种方法适用于页面与子页面之间传值,第三种通知则没有限制,但是通知是全局变量,消耗内存较大,须谨慎使用。



    展开全文
  • vue通信、传值的多种方式(详细)

    万次阅读 多人点赞 2018-12-12 11:09:02
    Vue通信、传值的多种方式,详解(都是干货):     一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等) this.$router.push({ path: '/...

    Vue通信、传值的多种方式,详解(都是干货):

     

     

    一、通过路由带参数进行传值

    ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)

    this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

    ②在B组件中获取A组件传递过来的参数

    this.$route.query.orderId

     

    二、通过设置 Session Storage缓存的形式进行传递

    ①两个组件A和B,在A组件中设置缓存orderData

    const orderData = { 'orderId': 123, 'price': 88 }
    
    sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

     

    ②B组件就可以获取在A中设置的缓存了

    const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))

    此时 dataB 就是数据 orderData

    朋友们可以百度下 Session Storage(程序退出销毁) 和 Local Storage(长期保存) 的区别。

    三、父子组件之间的传值

    (一)父组件往子组件传值props

    ①定义父组件,父组件传递 number这个数值给子组件,如果传递的参数很多,推荐使用json数组{}的形式

    ②定义子组件,子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会报错。

    当然也可以简单一点,如果不考虑数据类型,直接 props:["number","string"]就可以了,中括号包裹,多个值使用,分隔。

    ③假如接收的参数 是动态的,比如 input输入的内容 v-model的形式

    注意:传递的参数名称 支持驼峰命名,下图 描述不正确(1.0是不支持的)

    ④父子组件传值,数据是异步请求,有可能数据渲染时报错

    原因:异步请求时,数据还没有获取到但是此时已经渲染节点了

    解决方案:可以在 父组件需要传递数据的节点加上  v-if = false,异步请求获取数据后,v-if = true

    (二)、子组件往父组件传值,通过emit事件

    四、不同组件之间传值,通过eventBus(小项目少页面用eventBus,大项目多页面使用 vuex)

    ①定义一个新的vue实例专门用于传递数据,并导出

    ②定义传递的方法名和传输内容,点击事件或钩子函数触发eventBus.emit事件

    ③接收传递过来的数据

    注意:enentBus是一个另一个新的Vue实例,区分两个this所代表得vue实例

    五、vuex进行传值

    为什么使用vuex?

    vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手。

    需求:两个组件A和B,vuex维护的公共数据是 餐馆的名称 resturantName,默认餐馆名称是 飞歌餐馆,那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称 为 A餐馆,则B页面显示的将会是 A餐馆,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据。

             

    ①使用 vue-cli脚手架工具创建一个工程项目,工程目录,创建组件A和组件B路由如下:

    路由如下:

    import Vue from 'vue'
    import Router from 'vue-router'
    import componentsA from '@/components/componentsA'
    import componentsB from '@/components/componentsB'
    
    Vue.use(Router)
    
    export default new Router({
       mode: 'history',
        routes: [
            {
            path: '/',
            name: 'componentsA',
            component: componentsA
            },
            {
                path: '/componentsA',
                name: 'componentsA',
                component: componentsA
            },
            {
                path: '/componentsB',
                name: 'componentsB',
                component: componentsB
            }
        ]
    })

    app.vue

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

    ②开始使用vuex,新建一个 sotre文件夹,分开维护 actions mutations getters

    ②在store/index.js文件中新建vuex 的store实例

    *as的意思是 导入这个文件里面的所有内容,就不用一个个实例来导入了。

    import Vue from 'vue'
    import Vuex from 'vuex'
    import * as getters from './getters' // 导入响应的模块,*相当于引入了这个组件下所有导出的事例
    import * as actions from './actions'
    import * as mutations from './mutations'
    
    Vue.use(Vuex)
    // 首先声明一个需要全局维护的状态 state,比如 我这里举例的resturantName
    const state = {
        resturantName: '飞歌餐馆' // 默认值
        // id: xxx  如果还有全局状态也可以在这里添加
        // name:xxx
    }
    
    // 注册上面引入的各大模块
    const store = new Vuex.Store({
        state,    // 共同维护的一个状态,state里面可以是很多个全局状态
        getters,  // 获取数据并渲染
        actions,  // 数据的异步操作
        mutations  // 处理数据的唯一途径,state的改变或赋值只能在这里
    })
    
    export default store  // 导出store并在 main.js中引用注册。

    ③actions

    // 给action注册事件处理函数。当这个函数被触发时候,将状态提交到mutations中处理
    export function modifyAName({commit}, name) { // commit 提交;name即为点击后传递过来的参数,此时是 'A餐馆'
        return commit ('modifyAName', name)
    }
    export function modifyBName({commit}, name) {
        return commit ('modifyBName', name)
    }
    
    // ES6精简写法
    // export const modifyAName = ({commit},name) => commit('modifyAName', name)

    ④mutations

    // 提交 mutations是更改Vuex状态的唯一合法方法
    export const modifyAName = (state, name) => { // A组件点击更改餐馆名称为 A餐馆
        state.resturantName = name // 把方法传递过来的参数,赋值给state中的resturantName
    }
    export const modifyBName = (state, name) => { // B组件点击更改餐馆名称为 B餐馆
        state.resturantName = name
    }

    ⑤getters

    // 获取最终的状态信息
    export const resturantName = state => state.resturantName

    ⑥在main.js中导入 store实例

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,  // 这样就能全局使用vuex了
      components: { App },
      template: '<App/>'
    })

     

    ④在组件A中,定义点击事件,点击 修改 餐馆的名称,并把餐馆的名称在事件中用参数进行传递。

     

    ...mapactions 和 ...mapgetters都是vuex提供的语法糖,在底层已经封装好了,拿来就能用,简化了很多操作。

    其中...mapActions(['clickAFn']) 相当于this.$store.dispatch('clickAFn',{参数}),mapActions中只需要指定方法名即可,参数省略。

    ...mapGetters(['resturantName'])相当于this.$store.getters.resturantName

    <template>
      <div class="componentsA">
          <P class="title">组件A</P>
          <P class="titleName">餐馆名称:{{resturantName}}</P>
          <div>
                <!-- 点击修改 为 A 餐馆 -->
              <button class="btn" @click="modifyAName('A餐馆')">修改为A餐馆</button>
          </div>
          <div class="marTop">
              <button class="btn" @click="trunToB">跳转到B页面</button>
          </div>
      </div>
    </template>
    
    <script>
    import {mapActions, mapGetters} from 'vuex'
    export default {
      name: 'A',
      data () {
        return {
        }
      },
      methods:{
          ...mapActions( // 语法糖
              ['modifyAName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
          ),
          trunToB () {
              this.$router.push({path: '/componentsB'}) // 路由跳转到B
          }
      },
      computed: {
          ...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
        .title,.titleName{
            color: blue;
            font-size: 20px;
        }
        .btn{
            width: 160px;
            height: 40px;
            background-color: blue;
            border: none;
            outline: none;
            color: #ffffff;
            border-radius: 4px;
        }
        .marTop{
            margin-top: 20px;
        }
    </style>

        B组件同理

    <template>
      <div class="componentsB">
          <P class="title">组件B</P>
          <P class="titleName">餐馆名称:{{resturantName}}</P>
          <div>
              <!-- 点击修改 为 B 餐馆 -->
              <button class="btn" @click="modifyBName('B餐馆')">修改为B餐馆</button>
          </div>
          <div class="marTop">
              <button class="btn" @click="trunToA">跳转到A页面</button>
          </div>
      </div>
    </template>
    
    <script>
    import {mapActions, mapGetters} from 'vuex'
    export default {
      name: 'B',
      data () {
        return {
        }
      },
      methods:{
          ...mapActions( // 语法糖
              ['modifyBName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
          ),
          trunToA () {
              this.$router.push({path: '/componentsA'}) // 路由跳转到A
          }
      },
      computed: {
          ...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
        .title,.titleName{
            color: red;
            font-size: 20px;
        }
        .btn{
            width: 160px;
            height: 40px;
            background-color: red;
            border: none;
            outline: none;
            color: #ffffff;
            border-radius: 4px;
        }
        .marTop{
            margin-top: 20px;
        }
    </style>

    最后:本文完全手打,如需转载请注明出处,谢谢,如果不明白的地方欢迎给我留言哦。

    github项目仓库地址:https://github.com/byla678/vuexdemo.git

    卓越的云计算服务提供商,230万+用户正在享受阿里云"稳定,安全,低成本"的产品服务,金牌服务:免费体验,专业快速备案,7x24小时售后,服务器只选阿里云

    展开全文
  • 跨页面传值的几种简单方式

    万次阅读 2017-10-22 15:47:07
    通过URL传值 eg: location.href="跨页面1-2.html?age=18&gender=man"; 在下个页面接收: //1、location.search获取get请求的参数 获取到的数据,是以?开头的 var search=location.search; //2、如果还想要...
  • Vue2.0 传值方式:在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给...
  • 传值和传址

    千次阅读 2012-09-14 20:01:31
    C语言中所有的参数都是传值调用,意味着函数将获得参数值的一份拷贝。函数可以放心的修改这份拷贝,而不必担心会修改实际传递给他们的形参。但这种方式,有时候也会带来麻烦。如下例交换函数: void swap(int a, ...
  • 传引用调用与传值调用

    千次阅读 热门讨论 2017-10-26 12:20:01
    以下关于传值调用与传引用调用的叙述中,正确得是()。 ① 在传值调用方式下,可以实现形参和实参间双向传递数据的效果 ② 在传值调用方式下,实参可以是变量,也可以是常量和表达式 ③ 在引用调用方式下,...
  • C++语言的传递方式:传值,传地址,传引用。没记错的话C++98之后传引用才可以用。 第一种方式: 传值:就是拷贝一份数据给,数据量小无所谓,数据量大,这个不推荐,效率很慢的。 示例:第一个fun函数。典型的...
  • C与C++关于*与&(引用方式传参,传值方式传参)

    万次阅读 多人点赞 2020-02-19 20:37:10
    一个例子 补全该代码: 用C++: 用C:是把地址传进去,然后用*运算取地址的内容 ...2、传值方式传参,实际上是复制了一个外部变量的副本进入函数中,在函数内操作的为该副本,对该变量的修改...
  • 向模态框(modal)里传值

    万次阅读 2018-06-01 15:48:30
    网上百度如何向模态框里传值,试了好多种方法都不行,n久之后终于成功,特此记录
  • 小程序2个页面如何接传值

    万次阅读 多人点赞 2019-08-26 14:35:58
    小程序页面传值的方式 1.正向传值:上一页面 --> 下一页面 1.url传值 2.本地储存 3.全局的app对象 2.反向传值:下一页面 --> 上一页面 1.本地储存 2.全局的app对象 下面先说正向传值: 第一种:url 读到这...
  • Vue-属性传值Props

    万次阅读 2018-09-09 16:41:30
    vue传值有两种方法: 1、父组件向子组件传值(属性传值) 当数据都在App.vue中时,如下图 需要将App.vue中的值传给User.vue,则需要在两者的契合点上进行绑定,如下图, 在User.vue中需要进行注册(如下图)...
  • Vue 路由传值的几种方法

    万次阅读 2018-03-21 22:29:38
    在vue中使用router-link标签跳转有几种方法:一、直接在path后面添加简单动态参数,如标识id等: 路由配置: 标签内容:属性id可以在$router.params中获取 二、 路由...如果想传值to必须绑定如 :to,如果使用p...
  • vuex实现兄弟组件之间传值

    万次阅读 2019-03-06 20:01:04
    vuex传值的简单理解
  • ![图片说明]...父组件点击事件发生,子组件获取父组件传来的值,computed执行了两次,第一次是undefined,我应该怎样在子组件生命周期中获取父组件传递的值呢
  • JSP与Servlet之间传值

    万次阅读 2011-07-27 09:44:31
    Jsp与Sevlet之间的传值有两种,一种是Jsp传值给Sevlet,另一种是Sevlet...使用request、response对象完成传值,具体实现如下:1.JSP传值给SevletJSP传值给Sevlet有几种形式:Form表单传值,url传值,其他方式传值a、f
  • Vue.js父子组件如何传值 通俗易懂

    万次阅读 2020-09-09 11:10:46
    父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属性 3.在...
  • Vue-cli3.0+typescript 父子组件传值,兄弟组件的传值,router-view的传值父组件给子组件传值父组件内子组件内子组件给父组件传值子组件内父组件内兄弟组件传值router-view 的传值 父组件给子组件传值 父组件内 在父...
  • vue页面之间相互传值的方法

    万次阅读 2019-04-26 09:48:50
    1、使用query传值--地址栏可见 比如从a.vue跳转至b.vue,传name=‘jack’,代码如下: this.$router.push({ path: "/result", query: { name: 'jack' } }); 在b.vue通过地址栏的url 进行接收参数; 我是在...
1 2 3 4 5 ... 20
收藏数 194,121
精华内容 77,648
关键字:

传值