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

    2019-11-10 22:32:05
    传值页面 // html 中的点击图片跳转页面 showWordPicture(index) <ul> <li class="spellwords">{{item.word}}</li> <li class="audiowords"> <img class="audio...

    传值的页面 

    // html 中的点击图片跳转页面 showWordPicture(index)  
    <ul>
              <li class="spellwords">{{item.word}}</li>
              <li class="audiowords">
                <img class="audiowifi" src="../../assets/home/wifi.png" @click="playWordAudio(index)" />
                <audio :id="index" :src="item.audio"></audio>
              </li>
              <li class="picturewords">
                <img
                  class="showpicture"
                  src="../../assets/home/图片.png"
                  @click="showWordPictures(index)"
                />
              </li>
            </ul>
    
    showWordPictures(index) {
          this.$router.push({
            name: "word-picture", // 将要跳转的页面
            params: { // 传递的值
              id: this.wordList[index].id,
              word: this.wordList[index].word,
              audio: this.wordList[index].audio,
              picture1: this.wordList[index].wordPicture1,
              picture2: this.wordList[index].wordPicture2,
              picture3: this.wordList[index].wordPicture3,
              picture4: this.wordList[index].wordPicture4
            }
          });
        },

    接收传值的页面

    // 加载方法  
    methods:{
          showPicture(){
            var vm = this;
           vm.id = vm.$route.params.id; // 接收值
           vm.word =vm.$route.params.word;
           vm.audio=vm.$route.params.audio;
           vm.pictureList.push(vm.$route.params.picture1); // 插入值
           vm.pictureList.push(vm.$route.params.picture2);
           vm.pictureList.push(vm.$route.params.picture3);
           vm.pictureList.push(vm.$route.params.picture4);
           console.log("开始打印图片地址")
           console.log(this.pictureList);
          }
     
      },
        //进入页面的时候
        mounted(){
          this.showPicture(); 
        }
    

     

    展开全文
  • Vue跨页面传值

    千次阅读 2019-10-22 09:54:47
    问题如下: 当前需要在一个页面点击某个具体的...传值的时候使用了localStroage.setItem(“msg”,this.sendMsg) 却忽略了一个问题-----我定义的sendMsg是一个对象 在另一个页面接收的时候出现问题—打印接收到的值为...

    问题如下:
    当前需要在一个页面点击某个具体的数据并保存下来以便跳转到下个页面的时候使用
    传递一个具体的值过去
    当时我在data中定义了一个sendMsg:{}
    期间在代码中给sendMsg赋值
    传值的时候使用了localStroage.setItem(“msg”,this.sendMsg)
    却忽略了一个问题-----我定义的sendMsg是一个对象
    在另一个页面接收的时候出现问题—打印接收到的值为Object
    解决措施如下

    localStorage.setItem("msg",JSON.stringify(this.myMsg))
    let msg=JSON.parse(localStorage.getItem("msg")) 
    console.log(msg)
    localStorage.removeItem('msg');
    

    众所周知localStroage是长时效性的存储方式
    以上代码中的最后一行可以在使用完毕之后对存储的东西进行清空,以便于节省内存
    但是只要是操纵localStroage便会造成内存的一系列问题
    为了方便,也可选用如下方案

    sessionStorage.setItem("msg",JSON.stringify(this.myMsg))
    let msg=JSON.parse(sessionStorage.getItem("msg")) 
    console.log(msg)
    

    相比之下session方式比local方式的好处在于当你关闭浏览器的时候它便会自动销毁 不需要进行最后一步的手动清除
    在研究完好多办法之后,由于个人能力有限无法使用vuex对此问题进行处理,欢迎各位大佬指导

    展开全文
  • VUE跨页面传值的精妙

    千次阅读 2020-07-11 10:39:53
    而在技术日新月异的现在,Vue, React,Angular在代替旧的前端框架已经是大势所趋了。 一、vue简介 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的...

    背景

    众所周知,以前开发者只要掌握HTML、CSS、JavaScript 三驾马车就能胜任一份Web前端的工作。而在技术日新月异的现在,Vue, React,Angular在代替旧的前端框架已经是大势所趋了。

    一、vue简介

    Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    是一个兴起的前端js库,是一个精简的MVVM。从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染。

    二、与ajax比较

    2.1 vue本身不支持ajax请求,需要借助vue-resource,axios插件。vue2官方推荐axios,是一个基于Promise的HTTP请求客户端,不再对vue-resource进行维护和更新。

    axios([options])  
    axios.get(url[,options]);
        传参方式:
            1.通过url传参
            2.通过params选项传参
    axios.post(url,data,[options]);
        axios默认发送数据时,数据格式是Request Payload,并非我们常用的Form Data格式,
        所以参数必须要以键值对形式传递,不能以json形式传参
        传参方式:
            1.自己拼接为键值对
            2.使用transformRequest,在请求发送前将请求数据进行转换
            3.如果使用模块化开发,可以使用qs模块进行转换
     
    axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库

    2.2 ajax传参格式

    ajax是jquery封装的一个前端方法,通过请求后台API接口方式,用以局部刷新和动态展示页面。

    $.ajax({
        url: "http://localhost:8082/boot/request/parameter",
        type: "post",
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify({name: "aaa", foo: ["bar1", "bar2"]}),
        success: function (json) {
            console.log(json);
        }
    });

    2.3 vue传参格式

    场景:点击父页面的XX查询按钮,弹出子页面queryView,父页面选中的某行记录值传到子页面中,子页面请求后台Api关联查询并展示父页面选中记录对应的明细记录。

    1. 在父页面定义方法query()
    2. const rows为父页面查询列表选中的某行记录
    3. queryView为子页面
    4. params 为定义的传值对象
    5. callback 回调方法
    query() {
          let title = "XX查询"
          const rows = this.$refs.multipleTable.selection;
          this.$dialog.modal(queryView, {
            title: title,
            width: 1200,
            height: 600,
            params: {domain: Object.assign({}, rows[0])},
            callback: data=> {
              if(data.flag == true)
                this.queryData()
            }
          });
        }

    子页面中定义接收参数对象,接收参数对象有3种格式:变量、对象、常量

    这里定义为对象 Object

    props:{
        domain: {
          type: Object,
          default: function() {}
        }
      }

    调用后台api接口关联查询并展示

    1. params 定义方法中变量,获取从父页面接收的对象中的属性值
    2. this.operat4Data(XXApi.getList, params, null, null); 调用后台api接口及传参
    queryData() {
          let params = {apiParams:this.domain.apiParams};
          let respData =  this.operat4Data(XXApi.getList, params, null, null);
          respData.then( data => {
            this.dataList = data.posts;
            this.total = data.count;
          });
        }

     

    三、vue的优势

    vue因其极具方便灵活易用等特性,为广大前端开发者所推崇和使用。

     

    同名原创公众号: 程序大视界

     

    展开全文
  • 本篇文章主要介绍了详解vuejs几种不同组件(页面)间传值的方式,具有一定的参考价值,有兴趣的可以了解一下
  • vue跨组件传值

    千次阅读 2019-06-20 14:21:55
    步骤 #此方法是基于事件实现 创建一个GlobalBus.js文件 内容如下 ...在需要传值页面引入它 例如 import { globalBus } from "@/components/tool/GlobalBus.js" 接收组件在created注册好事件 等待其他成员...

    步骤

    #此方法是基于事件实现

    • 创建一个GlobalBus.js文件 内容如下
    import Vue from 'vue';
    export const globalBus = new Vue();
    
    • 在需要传值的页面引入它 例如
      import { globalBus } from "@/components/tool/GlobalBus.js"
    • 接收组件在created注册好事件 等待其他成员触发此事件
    //为了防止重复注册 可以在注册事件前先卸载一下事件
    globalBus.$off("aEvent");
    globalBus.$on("aEvent",function(data){
    	console.log(data);
    })
    
    • 发送组件触发刚才的事件 已注册好的组件就可以收到了
      globalBus.$emit("aEvent",{"name":"abc",message:"这里用的json,也可以直接写成字符串或者其他类型"});

    很简单 对不对

    https://www.jianshu.com/p/01c7e752684e

    展开全文
  • //传值 goInfo:function(id){ this.$router.push({name: 'clear', params: {id: id}}) } //接收 this.$route.params.id 路由配置 {path: '/cleaning/:id', component: cleaning,name: 'clear'}, ...
  • vue父子页面传值

    2020-03-13 21:36:08
    1.props 传值 //父组件 传递参数到自组件 <template> <div> <my-vue :name="name" :age="age"></my-vue> //:name="name" 传递name的值到子组件 </div> </template> <...
  • vue跨页面传数据

    千次阅读 2020-11-30 22:03:29
    跨页面跳转传数据 页面1 页面上, <template slot="particulars" slot-scope="{row}"> <span class="details" @click="onLook(row.id)">详情</span> </template> // 详情 methods里边, ...
  • 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 进行接收参数; 我是在...
  • vue跨页面调用与传参

    千次阅读 2019-02-20 14:03:00
    import children from './personmode/children.vue'; export default { components:{ 'mychild':children }, data() { return { tm:'' }; }, methods: { myrefresh:function(){ console.log('变化'); ...
  • 页面页面之间跳转传值,其实我们一般用两种,query传参或者用params 其实这两个方式都是页面导航的一种,编程式导航:通过调用JavaScript形式的API实现导航的方式,大家不了解的可以去官网看下,比较基础的东西。 ...
  • 路由传值方式 jump(id) { this.$router.push({ path: '/About', query: { id: id } }) }, 路由配置 { path: '/about', ...此时通过jump方法进行路由传值的时候页面url会更新但是页面的内容不会更新
  • VUE跳转页面传值 跳转页面传值有的会限制在页面地址栏上;有的不会,所以有三种传值方式 1、不会显示在地址栏上 this.$router.push({ name/path:" ", params:{ id:paramsId} }) 接收参数:this.$router.params.id 2...
  • eventBus实现组件传值一、触发事件与监听事件二、定义eventBus三、具体演示 一、触发事件与监听事件 在vue中可以使用vm.$emit触发自定义事件我们经常在子组件中使用this.$emit()触发一个自定义事件,然后在标签中...
  • vue 之实现跨页面传参

    千次阅读 多人点赞 2020-01-13 15:12:52
    最近在做项目的时候发现,在添加一条信息的时候需要显示这条信息的详细信息,但显示完刷新一下页面会跳到初始化状态,所以为了解决这种情况需要将添加的信息显示在另一个界面,具体解决方法如下: 一、父页面 1....
  • 跨vue路由传值

    2020-06-11 12:31:29
    跨vue路由传值(A跳转到B,B接收A的参数) 1.A页面 2. 路由配置(component为B页面路径) 3. B页面取值
  • 业务需求分析:用户在某个模块试卷...页面结构分析:有交卷按钮的页面为父页面,子页面是弹出层页面,是嵌套在父页面上的,行业术语为:父组件引入子组件。 技术点分析: a(父传子).由于是某个模块的答卷,且成功提交
  • 第一种: 父类传子类。 // 父组件 <template> ...son :isShow="data.isShow">...import son from '../...import { reactive } from 'vue' // 千万别忘记了 这个导入 export default { components: { ...
  • 在父组件中通过provide来传递 provide('data':要传递的值) 在下面的子组件或孙组件中通过 let ecorData: any = inject("data"); ...这样传递值在通过 inject 接收的页面通过watch监听是监听不到的
  • vue中使用路由传参时,根据不同传过来的参数值获取不同的数据时,参数没有实时获取到,必须刷新一下才能获取到怎么解决??? 直接监听路由 这里val参数是 ↓ 直接 val.query.tab 就可以获取到我们的传过来的...
  • 采用广播方式对非父子界进行传值,需要依赖的vueEvent.js
  • Vue组件radio 数据循环与跨页面传值

    千次阅读 2019-09-22 14:39:40
    效果图 选择前: 进入选择: 选择中 选择后 ...单选页面: html代码: <div class="categoty"> <van-cell-group> <van-field v-model="radio" placeholder="未定义" ...
  • 最近在工作中遇到了工作流,需要父子组件之前互相传值
  • vue jquery传值,点击文章链接后,重开一个页面显示文章详情,url上携带参数
  • eventBus 对于非父子组件的传值...在需要进行传值页面读引入这个Bus文件夹。 import Vue from 'vue' export default new Vue 在需要传值页面(组件)内通过$emit来触发一个自定义事件。 Bus.$emit("getCourse
  • ="../js/vue.min.js" > script > < script type ="text/javascript" > var Event = new Vue(); var A = { data() { return { a: ' 我是a组件中的数据 ' } }, template: ` < div > ...

空空如也

空空如也

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

vue跨页面传值

vue 订阅