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

    万次阅读 2018-08-07 20:13:09
    声明式:<...这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接B组件并且传参数。 1、router.push使用 router/index.js export default new Router({ routes: [ { path: '/', na...

    声明式:<router-link :to="...">

    编程式:router.push(...)

    这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数。

    1、router.push使用

    router/index.js

    export default new Router({
     routes: [
       {
       path: '/',
       name: 'A',
       component: require('../components/A')
      },
      {
       path: '/B/:name/:age',
       name: 'B',
       component: require('../components/B')
      }
     ]
    })


    A组件,绑定一个@click事件,跳转B组件传参 使用params上边,在路由中为B组件添加两个参数 name ,age

     

    这时浏览器会显示 :http://localhost:8080/#/B/xy/22

    在看下query  传值及地址变化

    同样在 router/index.js路由文件中 不变有两个参数name,age

    <template>
     <div> <!---只允许有一个最外层标签 !-->
      <div>
       <p>{
      {message}}</p>
       <p @click="toBFun">
    展开全文
  • VUE一个页面传值到另一个页面

    千次阅读 2020-10-25 11:45:40
    VUE一个页面传值到另一个页面

    VUE从一个页面传值到另一个页面

    方法一:通过路由进行数据的传参:
    前提:自己已经定义了路由,并可以实现页面的跳转

    //自己声明一个方法
    employeesdetails(id){
          this.$router.push(
          {
          //添加需要传值到那个页面的路径
          path:'/employeesdetails/employeesdetails', 
          //携带需要传递的参数
          query:{id:id}
          })
        },
    

    在另一个页面接受数据

    var id = this.$route,query.id;
    console.log(id);
    

    方法二:组件传值:
    1,在当前页面的部分代码
    html部分:

    <!--在父组件的子组件使用标签上,通过自定义属性传递变量-->
    <ordertable ref="msg"></ordertable>
    

    js部分:

    //导入组件
    import ordertable from './table.vue'
    
    export default {
      data() {
        return {
        }
      },
      //定义组件
      components:{
        ordertable,
      },
      
      mounted(){
      //父组件调用到子组件的方法
         this.$refs.msg[0].findAllorder(this.activeName);
      },
      methods: {
         handleClick(tab, event) {
            console.log(tab, event);
            // console.log(this.$refs.msg[tab.index],'---==');
            this.$refs.msg[tab.index].findAllorder(this.activeName);
          }
      }
    }
    

    2,在另一个页面中的部分代码:
    js部分:

    //直接接受参数
    findAllorder(name){
        console.log(name);
    }
    
    展开全文
  • 后台看见有人需要了解vue传值,今天就来了解下、通过路由带参数进行传值①两组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)this.$router.push({ path: '/conponentsB', ...

    后台看见有人需要了解vue传值,今天就来了解下

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

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

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

    ②在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(长期保存) 的区别。

    三、父子组件之间的传值

    1.父组件往子组件传值props

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

    0f8473f38c3069eed853eb80f28a0705.png

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

    e80f185d48a6dc6feee539e9d9b368ad.png

    ["number","string"]就可以了,中括号包裹,多个值使用,分隔。

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

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

    b3472fa56e1607f4da4f36e70a7b2da4.png

    5c4713e40f39bc70511fefb55bb576b2.png

    ④父子组件传值,数据是异步请求,有可能数据渲染时报错 原因:异步请求时,数据还没有获取到但是此时已经渲染节点了

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

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

    e353bf8c37b29c4721d8a3e4144fdcc3.png

    e8065177c6f666737e81ee1a43e50304.png

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

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

    98bfc69558f591499ef98217f1f88ee4.png

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

    a203fa6f6fb6cac4d9feafd0041e35e3.png

    ③接收传递过来的数据

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

    90cc19e185552c662eefa2c85b0f0b75.png

    五、vuex进行传值

    为什么使用vuex?

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

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

    4cc83228e3e9173a9a15010edd3fcee3.png

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

    7d8a1976cc42722b2309d59481d9862b.png

    路由如下:

    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

    id="app">

    export default {

    name: 'App'

    }

    #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;

    }

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

    7f6128bbf0e76fb78986d3ec84c97677.png

    ②在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: ''

    })

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

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

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

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

    class="componentsA">

    class="title">组件A

    class="titleName">餐馆名称:{{resturantName}}

    class="btn" @click="modifyAName('A餐馆')">修改为A餐馆

    class="marTop">

    class="btn" @click="trunToB">跳转到B页面

    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

    }

    }

    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;

    }

        B组件同理

    class="componentsB">

    class="title">组件B

    class="titleName">餐馆名称:{{resturantName}}

    class="btn" @click="modifyBName('B餐馆')">修改为B餐馆

    class="marTop">

    class="btn" @click="trunToA">跳转到A页面

    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

    }

    }

    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;

    }

    链接:https://blog.csdn.net/qq_35430000/article/details/79291287


    作为一个前端开发到底要不要写测试?

    JavaScript Event Loop 机制详解与 Vue.js 中实践应用

    Vue 面试中常问知识点整理

    522944ec72c387853722bdf3364eb461.png

    展开全文
  • 一个页面里的东西引入到另一个页面,就是父子组件了啊,有一些公共的可以提取的就封装成组件,相互之间有数据传递就是组件传值父组件向子组件传值一个就是要明白怎么在父页面中向子组件中传值?你可以给子组件...

    79b2550c1a278b138b6184b53139fb6d.png

    把一个页面里的东西引入到另一个页面,就是父子组件了啊,有一些公共的可以提取的就封装成组件,相互之间有数据传递就是组件传值

    父组件向子组件传值

    第一个就是要明白怎么在父页面中向子组件中传值?你可以给子组件传入一个静态的值:

    但我们一般都是需要传动态的值,所以需要v-bind绑定,当然,你传的值可以是数字、对象、数组等等,

    动态赋一个变量的值post.author.name”>

    第二个就是要知道如何在子组件中接受父页面传过来的值,有几点需要了解:

    1.组件实例的作用域是孤立的。

    2.组件要显式的用props选项声明它预期的数据,如:

    // 某个子组件中:export default {  props: {    title: {      type: String,      default: 'hello world'    }  }}

    子组件向父组件传值

    基本概念

    在vue中,父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送信息。

    2e2ae75168e92a41bc4c7823d79ac683.png

    每个Vue实例都实现了事件接口:使用$on(evntName)监听事件;使用$emit(eventName,optionalPayload)触发事件。另外,父组件可以在使用子组件的地方直接

    用v-on来监听子组件触发的事件。

    举例说明

    • 父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值。

    <template>    <div class="test">      <test-com @childFn="parentFn">test-com>      <br/>       子组件传来的值 : {{message}}    div>template><script>export default {    // ...    data: {        message: ''    },    methods: {       parentFn(payload) {        this.message = payload;      }    }}script>

    子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件。

    <template> <div class="testCom">    <input type="text" v-model="message" />    <button @click="click">Sendbutton>div>template><script>export default {    // ...    data() {        return {          // 默认          message: '我是来自子组件的消息'        }    },    methods: {      click() {            this.$emit('childFn', this.message);        }    }    }script>

    vue同级组件间传值

    1、在main.js同级目录下新建new.js文件

    import Vue from 'vue'export default new Vue()

    2、在组件a中传出值

    先引入new.js文件,再通过$emit传值

    <template>  <div @click="onfocus">div>template><script>    import New from '@/new.js'      export default{    methods:{        onfocus:function(fromid){          New.$emit('getisshow',{            show:true          })         }      }  }script>

    3、在同级b组件中通过$on接收

    展开全文
  • 父组件传值子组件: 需求1:假设要把父组件的zhuli传值到这是用户的详细信息(红色区域),该如何操作?(已知)标签上可以写自定义属性,在使用标签的时候,告诉子组件使用哪些标签,子组件中用props定义可以使用的属性...
  • vue一个单页应用,轻量,并且不会重复下载数据。当它从一个页面跳转到另一个页面时,原来的页面vue实例和相关数据已经销毁了,要实现逆传值就要找到操作的对象及它的一些属性
  • vue = > 如何传值到一个页面

    千次阅读 2018-05-22 06:42:28
    通过 this.$router.push(name:'要跳页面',query:{ojtId:id,appColum:pemUserId}) 复制代码在下一个页面中这样去获取上个页面传过来的值 created(){ var query = this.$route.query; } 复制代码...
  • 本篇文章主要介绍了详解vuejs几种不同组件(页面)间传值的方式,具有一定的参考价值,有兴趣的可以了解一下
  • 通过 this.$router.push(name:‘要跳页面’,query:{ojtId:id,appColum:pemUserId}) this.$router.push({path:'nonintelligentElectricityDetail', query:{deviceName:row.deviceName,...在下一个页面中这样去
  • 组件把某个界面或者说某个小功能,封装起来就叫组件(就是对html css js的一个综合封装),组件也是Vue的实例,所以它也有自己的data和methods以及生命周期钩子等组件开发特点:可复用,同时会简化代码结构,易于维护...
  • vue中从一个页面传参到另一个页面

    千次阅读 2018-07-19 17:50:00
    首先我在home.vue中定义 其次在另一个页面world.vue中 转载于:https://www.cnblogs.com/vsmart/p/9337272.html
  • 主要介绍了vue组件props传值,对象获取不的问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 案例代码实现如下的一个案例:简介该页面一个父组件Form.vue,添加学生的这个input框部分是一个子组件addStudent.vue,下面的 li 显示学生的这部分是一个子组件StudentList.vue。我们需要把addStudent.vue的数据...
  • 1.返回上页点击按钮及配置参数 backNav() { uni.$emit("planAdd",{...2.页面接收参数(在onShow里) onShow(){ let that = this; uni.$on("planAdd", res => { console.log(res); let tabIndex = r
  • 方法:父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加参数props接收即可。具体可参考官方文档。 父组件传递参数代码如下: <center xss=removed>...
  • vue如何将这个页面输入框的值传到另一个页面上面 就是在A页面输入框里面输入一个数字 把这个数字在B页面上面显示出来
  • 最近在工作中遇到了工作流,需要父子组件之前互相传值
  • 前言:在网上找了很多,大多给出的方式,只是在...vue页面 <iframe scrolling="no" ref="vueIframe" @load="loaded" frameborder="0" :src="`${publicPath}/html5/monitor.html`" style="width: 100%;height: 100%
  • vue 页面传值

    万次阅读 2018-05-11 17:38:41
    实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这问题。 栗子:由A向B 跳转 在A列表跳转页 //点击事件 goToSDetails : function (id) { this .$router. push ({ path : './release' ,...
  • (item,key,index) in indexLists" :key="index"> ,query:{ id:item.id}}"> <div class="list-img"><img src="../../../static/assets/images/index02.jpg"> ...这里使用了query来传递id到另一个页面
  • //传值 goInfo:function(id){ this.$router.push({name: 'clear', params: {id: id}}) } //接收 this.$route.params.id 路由配置 {path: '/cleaning/:id', component: cleaning,name: 'clear'}, ...
  • 1.iframe页面vue页面传值 vue代码 <template> <div> <iframe id="iframe"></iframe> </div> </template> <script> export default { data(){ return { ...
  • 使用params传值 这种方式不会在地址栏显示,且能搭配第二种方式使用 this.$router.push({ path: "/result", name: "Result", query: { name: 'name' }, params: { users: 'userlist' } ...
  • Vue页面传值方式总结

    千次阅读 2019-06-25 11:34:53
    1.父子组件传值 父组件通过components引入子组件,子组件通过props接收 子组件通过调用父组件方法实现通信 this.$emit(…) 父组件 <template> <div> <parent> <child :value="msg" @...
  • vue一个页面跳转到另一个页面并携带参数

    万次阅读 多人点赞 2018-08-20 15:59:21
    页面: a标签中添加跳转函数 &lt;a class="orderBtn1 sIRicon2" href="javascript:void(0);" @click="toMallInfo('M000989')"&gt;&lt;i class="sIRicon"&...
  • 主要介绍了解决vue一个页面中复用同一个echarts组件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,330
精华内容 6,532
关键字:

vue传值到另一个页面

vue 订阅