• 上一篇: 分享：快速部署一个node+vue2:SP... 下一篇:vue-cli 中使用 TypeScript

 子组件：
    <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文章 啦啦~~~~

脚本宝典总结

以上是脚本宝典为你收集整理的Vue2.0四——组件传参全部内容，希望文章能够帮你解决Vue2.0四——组件传参所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。