精华内容
下载资源
问答
  • 这次给大家带来vue-router组件间参数相互传递的方法vue-router组件参数相互传递的注意事项有哪些,下面就是实战案例,一起来看一下。通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下login ---用户名...

    这次给大家带来vue-router组件间参数相互传递的方法,vue-router组件参数相互传递的注意事项有哪些,下面就是实战案例,一起来看一下。

    通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下

    login ---用户名--->main

    ①明确发送方和接收方

    ②配置接收方的路由地址

    {path:'/myTest',component:TestComponent}

    -->

    {path:'/myTest/:id',component:TestComponent}

    ③接收方获取传递来的数据

    this.$route.params.id

    ④跳转的时候,发送参数

    this.$router.push('/myTest/20')

    跳转

    代码:

    传参

    {{msg}}

    //创建主页面组件

    var myMain = Vue.component("main-component",{

    //保存登录传递过来的数据

    data:function(){

    return {

    uName:''

    }

    },

    template:`

    主页面用户名:{{uName}}

    `,

    //挂载该组件时自动拿到数据

    beforeMount:function(){

    //接收参数

    console.log(this.$route.params);

    this.uName = this.$route.params.myName ;

    }

    })

    //创建登录页面组件

    var myLogin = Vue.component("login-component",{

    //保存用户输入的数据

    data:function(){

    return {

    userInput:""

    }

    },

    methods:{

    toMain:function(){

    //跳转到主页面,并将用户输入的名字发送过去

    this.$router.push("/main/"+this.userInput);

    console.log(this.userInput);

    }

    },

    template:`

    登录页面

    登录到主页面

    登录到主页面

    `

    })

    var NotFound = Vue.component("not-found",{

    template:`

    404 Page Not Found

    返回登录页

    `

    })

    //配置路由词典

    const myRoutes = [

    {path:"",component:myLogin},

    {path:"/login",component:myLogin},

    //注意冒号,不用/否则会当成地址

    {path:"/main/:myName",component:myMain},

    //没有匹配到任何页面则跳转到notfound页面

    {path:"*",component:NotFound}

    ]

    const myRouter = new VueRouter({

    routes:myRoutes

    })

    new Vue({

    router:myRouter,

    el:"#container",

    data:{

    msg:"Hello VueJs"

    }

    })

    // 注意,路由地址

    传参练习

    {{msg}}

    //创建产品列表组件

    var myList = Vue.component("product-list",{

    //保存产品列表的数据

    data:function(){

    return{

    productList:["苹果","华为","三星","小米","vivo"]

    }

    },

    template:`

    这是列表页

    • //将index传递过去

      {{tmp}}

    `

    })

    //详情页组件

    var myDetail = Vue.component("product-detail",{

    //保存传递过来的index

    data:function(){

    return{

    myIndex:""

    }

    },

    //在挂载完成后,将接收到的index赋值给myIndex

    mounted:function(){

    this.myIndex = this.$route.params.id;

    },

    template:`

    这是详情页

    这是id为:{{myIndex}}的产品

    `

    })

    //页面找不到的时候

    var NotFound = Vue.component("not-found",{

    template:`

    404 Page Not Found

    `

    })

    // 配置路由词典

    const myRoutes = [

    {path:"",component:myList},

    {path:"/list",component:myList},

    {path:"/detail/:id",component:myDetail},

    {path:"*",component:NotFound},

    ]

    const myRouter = new VueRouter({

    routes:myRoutes

    })

    new Vue({

    router:myRouter,

    el:"#container",

    data:{

    msg:"Hello VueJs"

    }

    })

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    展开全文
  • Vue组件间的参数传递

    2020-04-30 22:11:57
    Vue组件间的参数传递 1、父组件与子组件传值 父组件传给子组件:子组件通过props方法接受数据; 子组件传给父组件: $emit 方法传递参数 2、非父子组件间数据传递,兄弟组件传值 eventBus,就是创建一个事件...

    Vue组件间的参数传递
    1、父组件与子组件传值

    • 父组件传给子组件:子组件通过props方法接受数据;
    • 子组件传给父组件: $emit 方法传递参数

    2、非父子组件间的数据传递,兄弟组件传值

    • eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道)。
    展开全文
  • 组件间传递参数的几种方式父组件向子组件传递// 父组件import CenterTemplate from '../../components/admin/userCenterTemplate'export default {components: {'center-template': CenterTemplate},data () {return...

    组件间传递参数的几种方式

    父组件向子组件传递

    // 父组件

    import CenterTemplate from '../../components/admin/userCenterTemplate'

    export default {

    components: {

    'center-template': CenterTemplate

    },

    data () {

    return {

    userinfo: {name: 'jack'}

    }

    },

    }

    // 子组件

    export default {

    props: {

    // 接收

    form: {

    type: Object,

    default: {

    name: '',

    }

    }

    },

    }

    子元素调用父元素的方法

    直接在子元素中调用父元素的方法

    // 子元素

    changeInput(){

    // 子元素调用父元素的方法1

    if(this.$parent.nullSerarchResult){

    // 新增标签

    this.$parent.nullSerarchResult()

    }

    },

    // 父元素

    nullSerarchResult(val){

    this.pageNum = 1

    this.init({

    searchKey: val

    })

    },

    在子元素中使用$emit调用父元素的方法

    // 子元素

    新增

    addNewFun(){

    // 第三种方式是发布给父元素

    this.$emit('addTagFun')

    }

    // 父元素

    @addTagFun='addTagFun'

    >

    addTagFun(){

    this.$router.push('/admin/add_blog')

    },

    在子元素中绑定父元素的方法名

    // 子元素

    搜索

    props: {

    searchResult: {

    type: Function,

    default: null

    }

    },

    searchResultChild(){

    // 调用方法2,这种需要再props中声明

    if(this.searchResult){

    this.searchResult(this.serachValue)

    }

    },

    // 父元素

    :searchResult='searchResult'

    >

    searchResult(val){

    this.pageNum = 1

    this.init({

    searchKey: val

    })

    },

    使用event bus来实现组件间的通讯

    // common/bus.js

    import Vue from 'vue';

    // 使用 Event Bus

    const bus = new Vue();

    export default bus;

    // 组件1(接收通知信号)

    import bus from '@/common/bus.js'

    export default{

    data(){

    return {

    collapseData: ''

    }

    },

    created() {

    // 监听collapse,有变动就会收到通知,并改变collapseData值

    bus.$on('collapse', msg => {

    this.collapseData = msg

    })

    }

    }

    // 组件2 发布信号

    import bus from '@/common/bus.js'

    export default {

    methods: {

    sendData(){

    // 发布信号,触发这个函数,其他的接收函数都会收到相应的信息

    bus.$emit('collapse', '信息')

    }

    }

    }

    还有一种就是借用vuex传递信息

    // store/index.js

    import Vue from 'vue'

    import Vuex from 'vuex';

    Vue.use(Vuex)

    const store = new Vuex.Store({

    state: {

    userinfo: {},

    },

    mutations: {

    'SET_ROLES':(state,userinfo) => {

    state.userinfo = userinfo

    },

    },

    actions: {

    getUser({commit, state},userinfo){

    commit('SET_ROLES',userinfo)

    },

    }

    })

    export default store

    // views/slider.vue

    import { mapState, mapAcions } from 'vuex'

    export default{

    computed: {

    // 解构赋值

    ...mapState({

    userinfo: state => state.userinfo

    })

    },

    methods: {

    ...mapActions({

    getUser: 'getUser'

    }),

    handleUserInfo(){

    // 调用

    this.$store.dispatch('getUser','对象')

    }

    }

    }

    展开全文
  • vue页面间参数传递的方法总结

    千次阅读 2018-11-20 21:20:53
    方法二:通过设置 Session Storage/local Storage缓存形式进行传递 1、 原生用法使用 2、 对Session Storage/local Storage缓存进行统一封装 方法三:父子组件之间传值(通过props属性) 1、父组件给子组件...

    目录

     

    方法一:通过路由带参数进行传值

    方法二:通过设置 Session Storage/local Storage缓存的形式进行传递

    1、 原生用法使用

    2、 对Session Storage/local Storage缓存进行统一封装

    方法三:父子组件之间的传值(通过props属性)

    1、父组件给子组件传值

    2、子组件给父组件传值(通过emit事件)

    方法四:不同组件之间传值,通过eventBus

    方法五:vuex进行传值

    参考


    方法一:通过路由带参数进行传值

    需求:两个页面A,B,页面A传递参数值phase给页面B.

    做法:

    1)页面A附加参数://更新地址栏里面的信息哦

    router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})

    PS: this.$router.push({ path: '/iteration/track', query: {...this.$route.query, phase: this.phase} }) // 跳转到B

    2) 页面B获取地址栏中的参数;

    this.$route.query.project_id

    方法二:通过设置 Session Storage/local Storage缓存的形式进行传递

    想了解更多有关sessionStorage/localStorage,请移步:

    https://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081

    https://blog.csdn.net/huazhongkejidaxuezpp/article/details/84308916

    1、 原生用法使用

    window.localStorage['aaa']='一个例子啊'
    
    console.log(window.localStorage.getItem('aaa'))
    
    window.localStorage.setItem('test1',[1,2,3,4,5,6])
    
    window.localStorage.setItem('test2',{userId:'iiiiii',token:7788777})
    
    window.localStorage.setItem('test3','dfdfdf')
    
    console.log(window.localStorage.getItem('test1'))
    
    console.log(window.localStorage.getItem('test2'))
    
    console.log(window.localStorage.getItem('test3'))
    
    
    
    window.sessionStorage.setItem('test1',[1,2,3,4,5,6])
    
    window.sessionStorage.setItem('test2',{userId:'iiiiii',token:7788777})
    
    window.sessionStorage.setItem('test3','dfdfdf')
    
    console.log(window.sessionStorage.getItem('test1'))
    
    console.log(window.sessionStorage.getItem('test2'))
    
    console.log(window.sessionStorage.getItem('test3'))

    缺点:

    1)到处直接使用localstorage['aaa']='xxx'这些原生语法实现,这样耦合度太高了,假如有一天需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多

    2)起的key的名字难免会重复,而且这样也会造成全局污染

    3) 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用

    解决:

    封装storage的使用方法,统一处理

    规范storage的key值的命名规则

    规范storage的使用规范

    2、 对Session Storage/local Storage缓存进行统一封装

    import localstorage from '@src/util/localstorage';
    
    import sessionstorage from '@src/util/sessionstorage';
    
    import storage from '@src/util/storage';
    
    
    
    storage.storage('l','djjdjjd','jwejjwjejw',1);
    
    storage.storage('s','djjdjjd','jwejjwjejw',1);
    
    let a = storage.storage('l','djjdjjd',undefined,null);
    
    console.log(a)

     

    例如:页面A,B

    页面A中设置:storage.set('s','djjdjjd','jwejjwjejw',1);

    页面B中获取:storage.get('s')

    ps:Session Storage(程序退出销毁) 和 Local Storage(长期保存)

    localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M

    方法三:父子组件之间的传值(通过props属性)

    1、父组件给子组件传值

    父组件核心代码:

    ps: SubmitTest 为子组件名称

    <SubmitTest :iteration_id='this.iteration_id'/>

    子组件核心代码:

    props: {
            iteration_id: {
                type: String
            }

    2、子组件给父组件传值(通过emit事件)

    具体参考:https://www.cnblogs.com/LoveAndPeace/p/7273648.html

    方法四:不同组件之间传值,通过eventBus

    场景:小项目,页面量较少的情况下使用

    使用前可以在全局定义一个eventBus
    
    
    window.eventBus = new Vue();
      在需要传递参数的组件中,定义一个emit发送需要传递的值,键名可以自己定义(可以为对象)
    
    
    eventBus.$emit('eventBusName', id);
      在需要接受参数的组件重,用on接受该值(或对象)
    
    
    //val即为传递过来的值<br>eventBus.$on('eventBusName', function(val) {<br>   console.log(val)<br>})
      最后记住要在beforeDestroy()中关闭这个eventBus
    
    eventBus.$off('eventBusName');

    方法五:vuex进行传值

    场景:vuex主要是是做数据交互,适用于大项目,页面量较多的业务

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

    例子: 两个组件A和B,vuex维护的公共数据是地理位置,现在A和B页面显示的是相同的地理位置。 需求想实现:如果A修改了地理位置,则B页面的显示随之修改,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据。

    vuex了解:

    https://vuex.vuejs.org/zh/

     

    参考

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

    https://www.cnblogs.com/ygtq-island/p/6728137.html

    https://www.cnblogs.com/LoveAndPeace/p/7273648.html

     

     

     

    展开全文
  • 答: 1.父组件与子组件传值 父组件传给子组件:子组件...2.非父子组件间的数据传递,兄弟组件传值 eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。 ...
  • 2.子组件调用父组件:emit(this.$emit(调用的方法名,传递的参数)) 数据 1.父组件传给子组件:props 2.子组件传给父组件:emit 共享采用vuex 其他可用导入(import) 转载于:...
  • 主要为大家详细介绍了vue-router实现组件间的跳转,参数传递方法,具有一定参考价值,感兴趣小伙伴们可以参考一下
  • Vue组件间的作用域是独立的,不能相互之间调用数据,需要通过特定的方法进行数据的传递。一、父组件往子组件传递数据1、使用 Prop 传递数据组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接...
  • vue实现组件间通信的方法 1. props + $emit 这是我们最常用到的方法,props是单向数据流,通过父组件向子组件传递数据可以使用props,但是如果子组件子元素向父元素传参的话,则需要this.$emit(‘methodName’,...
  • Vue组件间的通信案例

    2020-09-17 11:40:28
    Vue组件间的通信案例一:前提说明二: 需求说明三:需要用知识点(懂可以跳过)3.1 属性绑定案例一:案例二:3.2 组件调用页面方法案例:四:关键代码展示4.1 组件 B:4.2 页面 A:五: 页面引入组件流程...
  • vue 组件间的传值

    2020-10-27 22:15:29
    利用 子组件 中的 $meit 属性,注册事件,然后在 父组件 中,使用 $meit 定义的方法,在 父组件 中绑定事件;我们触发 子组件 的绑定 $meit 事件,就会 触发 父组件中的数据; 如果,再利用 $meit 的第二个属性,...
  • ②在需要调用其他组件的页面: EventBus.$emit ( '自定义函数', 传参 ); ③被调用页面: EventBus.$on ( '自定义函数', (接收参数) => { 执行你需要执行方法 } ④总结 EventBus使用场景像是...
  • 一、父子组件之间的传值( props down, events up ) (1)父组件到子组件(通过props) 父组件:(在注册声明的子组件上加 :xxx 表示要传递...-- 要传递的参数方法, 静态prop值直接添加占位符(name(数字除外,...
  • 1.通过属性传值 定义:xxx 然后在子组件中...2.传递方法 (可通过在子组件中反馈参数 实现 子组件向父组件返值处理) 3.传递一整实例 :xxx=“this” 子组件中 获取 时用 this.xxx.想要获取属性和数值或者方法 ...
  • 组件通过 props接收父级传递的参数,通过$emit触发父级方法,传递参数组件: <input type="text" :value="title"> <button @click="addList">添加</button> ... props: ['title'], ... ...
  • 即子组件通过在自身的事件执行方法中使用this.$emit('自定义事件名称',需要传递的内容),这个方法,在组件使用时监听自定义事件,从而在父组件中处理自定义事件的带参数的执行方法来进行信息传递。 通信步骤: (1)子...
  • 组件标签绑定需要传递的参数名2⃣️.子组件页面使用props 接收参数2.子组件向父组件传值1⃣️.子组件使用$emit来触发一个自定义事件,并传递一个参数2⃣️.父组件中的子标签中监听该自定义事件并添加一个响应该...
  • vue组件间的参数传递02. vue子组件调用父组件方法,父组件调用子组件方法03. 兄弟组件之间如何通讯?自定义事件正文01. vue组件间的参数传递父子组件传值父-》子 通过props子组件接收什么参数是有规则,既可以是...
  • vue非父子组件传值基本语法 创建一个新的vue对象 var newvue = new Vue() 触发事件 newvue.$emit('自定义事件名', 参数) 监听事件 newvue.on('自定义事件名', 触发方法名) 销毁事件 newvue.off('自定义事件名')...
  • 组件:子组件使用$emit()向外传递自定义事件,父组件通过v-on(@是简写)监听,可以使用$event接收参数,也可通过定义一个method接收参数 这应该是项目中最常用的方法,不多说了吧。 父组件代码如下: <...
  • 1.父组件向子组件传值 父组件中使用:conut=“1”传递给子组件,子组件中使用props接收count 父组件可以随意向子组件传值,...子组件方法中向外触发一个inc事件,并携带一个参数,父组件接收子组件的inc事件...
  • vue组件间的通信

    2018-11-21 21:19:55
    组件间的关系可分为父子组件通信、兄弟组件通信、跨级组件通信。 父组件向子组件传递数据 子组件向父组件传递数据 ... $emit()方法的第一个参数是自定义事件的名称,后面的参数是要传递的数据,可以不写,或...
  • vue父子组件间的传值

    2019-05-23 12:53:26
    组件向父组件传值,父组件将带参方法传递给子组件@func='param',在子组件里触发该方法并带上参数this.$emit('func',this.childmsg) <!--+++++++++++++++++++++++++++父组件++++++++++...
  • A页面和B页面是两个平行页面,非父子组件关系,先要将A页面的参数传递到B页面中。 ⚠️注意 :query 中参数 params ,需要使用JSON.stringify({}) 方法,把对象转化成JSON字符串 A.vue 页面 <el-button ...
  • vue.js 兄弟组件间传值 1、兄弟之间传递数据可以借助事件车,通过事件的方式传递数据 2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。 3、传递数据方,通过一个事件触发Bus.emit(方法名,传递的数据)。4、...
  • 需求说明 ... Do it ...在js中编写这个事件的方法 打开页面,可以看到没有问题,city页面监听到了字母表页面的点击 <3>city父页面把字母表页面的请求转发给list页面 首先我们要在city页面定义一个letter

空空如也

空空如也

1 2 3 4
收藏数 72
精华内容 28
关键字:

vue组件间参数传递的方法

vue 订阅