路由配好了 再传个参呗

注:组件信息流转的时候只能单向
1 > 父子传参
传参:通过属性
prop:传递数据

a.父组件传参给子组件

 子组件:
    <ul>
        <li v-for="item in dataList"></li>
    </ul>

    export default {
        prop: {              //prop接收传过来的参数
            dataList: {
                type:Array,
                required:true    //校验
            }
        },
        data() {
            return {
                dataList: this.dataList
            }
        }
    }
  父组件
    <Position :data-list='List'></Position>  

b.子组件传参给父组件

父组件传一个函数给子组件
子组件:
    export default {
        prop: ['id','onbuttonInfo'],
        data() {
            return {
                posid: this.id,
                title: 'abc'
            }
        },
        mounted() {
            this.onbuttonInfo(this.title)
        }
    }
 父组件:
    <Position :id='sid' :onbuttonInfo='handleButonInfo'>职位列表</Position>
    methods:{
        handleButonInfo (msg) {
            console.log(msg)
        }
    }
    注意:浏览器的坑 会把buttonInfo 都改成全小写

2 > 动态路由传参

方式一:path:'/main/:变量名'
方式二:
方法:
    传:
    this.$router.push({name: 'goodslist',params:{"list":this.list}})
    接收:
    data() {
      return {
          goodsList: this.$route.query.list,
          val: ''
      }
    },

3 > 跳级组件传参 bus总线

1、components中建Bus.js文件
    import Vue from 'vue'
    const Bus = new Vue({

    })
    export default Bus
2、index。vue中
    import Bus from '../Bus.js'
    mounted() {
        Bus.$on('on-msg',(data)=>{   //订阅 绑定事 接收参数
            console.log(data);
        })
    }
3、positionList.vue
    import Bus from './Bus.js'
    methods:{
        do() {       //发布 传参
            this.$router.push({name:'search',})
            Bus.$emit('on-msg',120)
        }
    }    

4 > vuex传参(重点)请查看我的vuex文章 啦啦~~~~

vue 组件传参的更多相关文章

  1. vue组件传参

    一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...

  2. vue 组件传参及跨域传参

    可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...

  3. 前端vue组件传参

    ## 路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name ...

  4. vue组件传参的方法--bus事件总线

    定义:事件总线是实现vue任意组件之前传递参数的一种编程技巧,本质上就是组件的自定义事件.事件总线有很多种写法,具体的思路就是创造一个大家都可以访问到的公共的属性,在这个公共的属性上面可以调用$on, ...

  5. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  6. vue 父子组件传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  7. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  8. vue父组件传参给子组件

    其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...

  9. 【vue】父向子组件传参、子组件向父传参

    1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...

随机推荐

  1. [转载]ISE中COE与MIF文件的联系与区别

    原文地址:ISE中COE与MIF文件的联系与区别作者:铁掌北京漂 在ISE中,当用Blcok Memory Generator 生成某个ROM模块时,经常要对ROM中的内容作初始化.这时,就需要我们另 ...

  2. Windows 开启 winrm

    # Windows 开启 winrm   ``` Enable-PSRemoting   winrm enumerate winrm/config/listener   winrm quickconf ...

  3. mysql 中文乱码 修改编码 utf8

    在安装完数据库的时候,先不要创建数据库,先去更改字符集设置. show variables like 'character%'; vim /etc/my.cnf   (注意 下面的字段文件内没有时,自 ...

  4. varnish流程图

    varnish流程图

  5. expect实现远程主机自动执行命令脚本

    2014年第一个脚本,哈哈!!! expect实现远程主机自动执行命令脚本: #!/usr/bin/expect -- if { [llength $argv] < 4 } { puts &qu ...

  6. OCP内容

    安装 --网络 --存储 --用户 --对象 --ASM (包含前面的内容的复习)--内存管理 -- 备份 --闪回 -- 事务 --sql 编程

  7. Linux学习-利用inotify和rsync实现数据的实时同步

    一.inotify简介 1.inotify介绍 异步的文件系统事件监控机制,利用事件驱动机制,而无须通过诸如cron等的 轮询机制来获取事件,linux内核从2.6.13起支持 inotify,通过i ...

  8. SQL server 统计分组经计

    SUM(A.AREA) OVER ( PARTITION BY A.ItemNo, A.PARTS ,A.WIDTH,A.HEIGHT) allotQty, SUM(A.SL) OVER ( PART ...

  9. WEB超大文件上传与下载

    1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...

  10. HDU 2825 Wireless Password ( Trie图 && 状态压缩DP )

    题意 : 输入n.m.k意思就是给你 m 个模式串,问你构建长度为 n 至少包含 k 个模式串的方案有多少种 分析 : ( 以下题解大多都是在和 POJ 2778 && POJ 162 ...