Vue2.0-组件间通信、组件间传递数据方法总结（带例子）

组件间通信-传递数据

父组件给子组件传递数据，子组件需要设置props来声明自己的预期数据，如果传递的数据有‘-’，子组件要用小驼峰形式接受：

<div id="app">
    <aaa></aaa>         
</div>
<template id='A'>
    <div>
        <h1>A组件{
   {
   num}}</h1>
        <bbb :num='num'></bbb>
    </div>
</template>
<template id='B'>
    <div>
        <h1>B组件{
   {
   num}}</h1>
    </div>
</template>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            'aaa':{
                template:'#A',
                data:function(){
     
                    return {
                        num:1
                    }
                },
                components:{
                    'bbb':{
                        template:'#B',
                        props:['num']
                    }
                }
            }
        }
    })
</script>

传递的数据如果是引用类型的，父子组件就可以双向控制

<div id="app">
    <aaa></aaa>         
</div>
<template id='A'>
    <div>
        <input type="text" v-model="content.num" />
        <h1>A组件{
   {
   content.num}}</h1>
        <bbb :content='content'></bbb>
    </div>
</template>
<template id='B'>
    <div>
        <input type="text"