vue组件传值方式介绍

vue组件传值有，父传子，子传父，兄弟传值

在vue中，每一个组件都是一个单独的个体，自己组件内的东西自己改变

1，父传子运用的方法是：自定义属性绑定

父元素通过将自己的数据绑定到自定义属性上，子组件通过 props 接收

HTML代码

<div id="app">
　　<Father />
</div>
<template id="father">
　　<div>
　　　　<p>使用单向数据绑定，将父组将的值绑定到子组件身上</p>
　　　　<!-- 可以自己定义组件属性，一般与属性值一样 -->
　　　　<son :msg='msg' />
　　</div>
</template>
<template id='son'>
　　<div>
　　　　子组件接收父组件传递的值：{{msg}}
　　</div>
</template>

JS代码

        // 创建父组件
        Vue.component('Father', {
                template: '#father',
                data() {
                    return {
                        msg: 300
                    }
                }
            })
            // 定义子组件
            Vue.component('Son', {
                template: '#son',
　　　　　　　　　　// 此处的 msg 为自定义的属性，而不是父元素中的数据 msg ，
                props: ['msg'],
            })
　　　　　　　// 此处 new 出的实例对象要放在定义的组件下边
            new Vue({
                el: "#app"
            })        

 

2，子传父：通过自定义事件绑定   $emit

子组件发出一个传递数据的动作，父元素接收。

HTML代码

　　　　　<div id="app">
            <Father></Father>
        </div>
        <template id="father">
            <div>
                <!-- 此处定义事件名，可以自定义，一般与函数名相同，但是子组件调用时，调用的是前边的函数名，后边的 hide 为父组件中的函数 -->
                <Son @hide='hide'></Son>
            </div>
        </template>
        <template id="son">
            <div>
                子组件有message，父组件需要但是没有
                <button @click="give">传递数据</button>
            </div>
        </template>

JS代码

　　　　　　　// 定义父组件
            Vue.component('Father', {
                template: '#father',
                data() {
                    return {
                        messageFather: 500
                    }
                },
                methods:{
                    // 接收子组件传递过来的东西
                    hide(val) {
                        this.messageFather += val
                    }
                }
            })
            // 定义子组件
            Vue.component('Son', {
                template: '#son',
                data() {
                    return {
                        message: 902
                    }
                },
                methods: {
                    // 通过事件派发，传递数据
                    give() {
                        this.$emit('hide',this.message)
                    }
                }
            })
　　　　　　　// 实例化对象
            new Vue({
                el: '#app'
            })

3，兄弟组件传值

兄弟组件传值主要是运用的 vue 中的 $emit  , $on 来实现接收与传递的

HTML代码

        <div id="app">
            <Son></Son>
            <Girl></Girl>
        </div>
        <template id="son">
            <div>
                {{msg}}
                <button type="button" @click="giveValToGirl">组件值</button>
            </div>
        </template>
        <template id="girl">
            <div>
                {{msg}}
            </div>
        </template>        

JS代码

         　　let vue = new Vue()
            Vue.component('Son', {
                template: '#son',
                data() {
                    return {
                        msg: 'son的值，需要传递给girl'
                    }
                },
                methods: {
                    giveValToGirl() {
                        // 此处 SonGirl 为自定义的，但是要与下方保持一致
                        vue.$emit('SonGirl', this.msg)
                    }
                }
            })
            Vue.component('Girl', {
                template: '#girl',
                data() {
                    return {
                        msg: 'girl的初始值'
                    }
                },
                mounted() {
                    // 此处 SonGirl 与上方 son 组件中的 $emit 保持一致
                    vue.$on('SonGirl', (val) => {
                        // console.log(val)
                        this.msg = val
                    })
                }
            })
            new Vue({
                el: '#app'
            })