vue中组件间的传参

1.父传子

　　父组件准备一个数据，通过自定义属性给子组件赋值，进行传递

　　在子组件中通过 props 属性来接收参数

<body>
    <div id="app">
        <son passdata="msg"></son>
    </div>
</body>
<script>
    Vue.component('son', {
        template: '<div>父组件的数据为：{{ passdata }}</div>'，
        props: ['passdata']
    })
    new Vue({
        el: '#app',
        data: {
            msg: '父组件数据'
        }
    })
</script>

2.子传父

　　在子组件准备一个数据，通过 this.$emit('自定义事件', '参数'),进行传递。this.$emit 相当于要执行子组件的自定义事件，并且传入参数
　　在父组件中给子组件注册好自定义事件，并且实现这个方法，就可以得到参数了。<son @自定义事件="getval">

<body>
    <div id="app">
　　　　　//myevent是子组件中的事件
        <son @myevent='getVal'></son>
    </div>
</body>
<script>
    Vue.component('son', {
　　　　　//①通过事件触发passval方法
        template: `<div>给父组件传参<button @click="passval">传参</button></div>`,
        data(){
              return {
                son: 'son数据'
            }    
        },
        methods: {
            passval(){
　　　　　　　　　　//②执行子组件中的myevent事件，通过$emit进行传递（this.son为传递的数据）
                this.$emit('myevent', this.son)
            }
        }
    })
    new Vue({
        el: '#app',
        methods: {
　　　　　　　//③value就是传递过来的数据
            getVal(value){
                   console.log(value) 
            }
        }
    })
</script>

3.并列组件传参

　　创建一个公用的 bus (vue 实例)　　var vm = new Vue()

　　在 A 组件传入数据　　vm.$emit('passval', this.name)

　　在 B 组件接收数据　　vm.$on('passval' ,function(value){})

<body>
    <div id="app">
        <coma></coma>
        <comb></comb>
    </div>
</body>
<script>
　　//①创建一个公共实例
    var vm = new Vue()
    Vue.component('coma', {
　　　　　//通过事件触发 myclick方法去传参
        template: `<div><button @click="myclick"></button></div>`，
        data() {
            return {
                name: 'coma'
            }
        },
        methods: {
            myclick: function(){
　　　　　　　　　　//向公共实例传入数据
                vm.$emit('passval', this.name)
            }
        }
    })
    Vue.component('comb', {
        template: `<div>comb</div>`,
        mounted() {
　　　　　　　　//接收数据
            vm.$on('passval', function(value){
                console.log(value)
            })
        }
    })
    new Vue({
        el: '#app'
    })
</script>

vue中组件间的传参

猜你喜欢