首页 > > 网页制作 > Javascript >

vue.js组件之间通讯的数据双向绑定----父亲把数…

2018-06-24 00:08:13来源：未知阅读 ()

vue组件是相互独立的，如果要交互通讯，这时候，就需要组件之间数据互通了

往常我们讲的都是数据传递，子传父，父传子，都没有说子和父，父与子之间的数据互通

父亲传递给儿子数据，儿子触发一个父亲方法，将最新的值传递给父亲，父亲更改后，属性会重新传递儿子，儿子会刷新

--- 什么叫数据互通，就是父传子-子接受传递父-父再次传递子

说一个简单例子，如果爸爸给儿子介绍了一个美女，此时儿子接受到了爸爸介绍的美女，

发现这个美女不美，不符合口味，要向父亲传递一个信息，明确要求父亲，按这个信息要求

再介绍一个美女，父亲接收到儿子的信息后，然后重新发儿子介绍一个美女

现在大家明白了吧！??

在vue中父与子之间的数据互通过程

这个过程大家一定要牢记

父亲先在儿子组件上通过绑定一个属性，然后给这个属性赋值，给儿子传递数据
- 例如 <child :m="msg" ></child>
儿子接收父亲的传递的数据props儿子拿到数据后，要修改数据，（儿子无法把父亲传递的参数重新赋值）
- props:{m:{type=Array}}
然后儿子重新发射一个自定义事件方法,后面跟要修改的值
- this.$emit("ee",1000);
此时儿子组件上要绑定发射的自定义方法，赋值父亲的接收的函数fn
- <child :m="msg" @ee="fn">
父亲接收函数，参数就是儿子发射过来的数据这样就成功了实现父与子之间的数据双向绑定
- fn(data){ //此时把儿子发射过来的数据data，重新赋值给第一次传递过去的msg return this.msg=data; }

下面是实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //儿子触发父亲的一个方法，将最新的值传给父亲，父亲更改后，属性会重新传递，儿子会刷新
    let vm = new Vue({
        el:'#app',
        //通过在儿子组件上绑定一个属性向儿子传递数据
        // @ee="fn" 接收儿子传递过来数据，ee是儿子那边自定义的事件方法，必须绑定在儿子组件上
        template:'<div>父亲+{{money}}<child :m="money" @ee="fn"></child></div>',
        data:{
            money:100
        },
        methods:{
            fn(data){
                //父亲接收儿子的数据函数
                return this.money=data;
            }
        },
        components:{
            child:{
                //接收父亲传递过来的属性值
                props:{m:{}},
                template:'<div>{{m}}<button @click="more">点击</button></div>',
                methods:{
                    more(){
                        //向父亲发射一个自定义方法，并传递过去自己的值
                        this.$emit('ee',1000)
                    }
                }
            }
        }
    })
</script>
</body>
</html>