初识vue.js，我的学习之路（五）

   vue中的父子组件值的传递

  在子组件中定义props属性，里面写上属性名称,:message全写就是v-bind，通过这种方式实现父子组件值的传递。

<div id="app">

    <div>
        {{parent}}
    </div>

    <com :message="parent"></com>


</div>

<script src="vue.js"></script>
<script>

    new Vue({ //父组件
        data:{
            parent:"这是父组件"
        },
        el:"#app",
        components:{

            com:{  //子组件
                props:["message"],
29                 template:"<h1>{{message}}</h1>"
                        
            }
                
        }
    })
</script>

    子与子之间的值传递

自定义事件

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

<div id="app">

    <aaa></aaa>
    <bbb></bbb>

</div>

<script src="vue.js"></script>
<script>

    var Vm = new Vue();

    new Vue({
        el:"#app",
        components:{
            aaa:{
                data:function(){
                    return{
                        str1:"a数据"
                    }
                },
                template:"<h1 @click='run'>这是A子组件==>{{str1}}</h1>",
                methods:{
                    run:function(){
                        Vm.$emit("show",this.str1);
                    }
                }
            },
            bbb:{
                data:function(){
                  return{
                      b:""
                  }

                },
                template:"<h1>这是B子组件===:>{{this.b}}</h1>",
                mounted:function(){
                    var _this = this;
                    Vm.$on("show",function(data){
                        _this.b = data;
                    })
                }
            }
        }

    })
</script>