vue组件传参

 

注：组件信息流转的时候只能单向
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)
        }
    }