vue 组件传参

妖精的绣舞 提交于 2019-11-30 10:18:32

路由配好了 再传个参呗

注:组件信息流转的时候只能单向
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文章 啦啦~~~~


标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!