vue组件传值方式介绍

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

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

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

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

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

JS代码

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

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

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

HTML代码

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

JS代码

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

3，兄弟组件传值

兄弟组件传值主要是运用的 vue 中的 $emit HTML代码

Girl {{msg}} type="button" @click="giveValToGirl">组件值="girl" {{msg}} >

JS代码

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

vue组件传值方式介绍

猜你在找的Vue相关文章