组件间的数据交互

1、父组件向子组件传值

组件内部通过props接受传递过来的值

　　props属性名规则

　　　　在props中使用驼峰形式，模板中需要使用短横线的形式

　　　　在字符串形式的模板中没有这个限制

    <div id="app">
        <div>{{pmsg}}</div>
        <test-con title="来自父组件的值" content="hi"></test-con> // 静态数据传值
        <test-con :title="ptitle" content="hello"></test-con>  // 静动态结合使用
　　　　　<test-con :title="ptitle"></test-con>  // 动态数据传值
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('test-con', {
            props: ['title', 'content'],
            data: function() {
                return {
                    smsg: '子组件'
                }
            },
            template: '<div>{{smsg + "---------" + title + "-------" + content}}</div>'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件',
                ptitle: '动态绑定的值'
            },
        })
    </script>

　　props属性值的类型

　　　　String　　Number　　Boolean　　Arrey　　Object

    <div id="app">
        <item-one :str="pstr" :num="pnum" :bol="pbol" :arr="parr" :obj="pobj"></item-one>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('item-one', {
            props: ['str', 'num', 'bol', 'arr', 'obj'],
            template: `<div>{{str + "----" + num + "----" + bol}}
                            <ul>
                                <li :key="index" v-for="(item, index) in arr">{{item}}</li>
                            </ul>
                            <div>{{obj.uname}}</div>
                            <div>{{obj.age}}</div>
                        </div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pstr: '我是String',
                pnum: 12,
                pbol: true,
                parr: ['apple', 'banana', 'orange', 'lemon'],
                pobj: {
                    uname: 'KUN',
                    age: 21
                }
            }
        })
    </script>    

　　2、子组件向父组件传值

　　　　（1）子组件通过自定义事件的方式向父组件传值

    <div id="app">
        <item-one :arr="parr" v-on:enlarge-text="handel($event)"></item-one>
    </div>
    <script>
        Vue.component('item-one', {
            props: ['arr'],
            template: `<div><button @click='$emit("enlarge-text", 5)'>点击扩大父组件中的字体</button></div>`
        })
        var vm = new Vue({
            el:' #app',
            data: {
                pmsg: '父组件中的内容',
                fontSize: 14,
            },
            methods: {
                handel: function(val) {
                    this.fontSize += val;
                }
            }
        })
    </script>

　　3、兄弟组件之间的传值

　　　　（1）使用单独的事件中心管理组件之间的通信

　　　　　　创建事件中心就是new一个Vue实例  var eventHub = new Vue();

　　　　（2）监听事件与销毁事件

　　　　　　　　监听事件　　eventHub.$on('事件名称', 事件触发处理函数)

　　　　　　　　销毁事件　　eventHub.$off('事件名称')

　　　　（3）触发事件　　eventHub.$emit('事件名称','实参')

　　　<div id="app">
        <div>{{pmsg}}</div>
        <button @click="handel">销毁</button>
        <kun-text></kun-text>
        <ikun-text></ikun-text>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var hub = new Vue(); // 创建事件中心

        Vue.component('kun-text', {
            data: function() {
                return {
                    num: 0,
                }
            },
            template: `<div>
                        <div>kun:{{num}}</div>
                        <button v-on:click="handel">点击</button>
                    </div>`,
            methods: {
                handel: function() {
                    // 触发事件
                    hub.$emit('ikun-event', 1);
                }
            },
            mounted: function() {
                // 监听事件
                hub.$on('kun-event', (val) => {
                    this.num += val;
                })
            }
        })
        Vue.component('ikun-text', {
            data: function() {
                return {
                    num: 0,
                }
            },
            template: `<div>
                        <div>ikun:{{num}}</div>
                        <button v-on:click="handel">点击</button>
                    </div>`,
            methods: {
                handel: function() {
                    // 触发事件
                    hub.$emit('kun-event', 2);
                }
            },
            mounted: function() {
                // 监听事件
                hub.$on('ikun-event', (val) => {
                    this.num += val;
                })
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件'
            },
            methods: {
                handel: function() {
                    hub.$off('kun-event');
                    hub.$off('ikun-event');
                }
            }
        })
    </script>