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)
        }
    }