1.子传父通信

<div id="app">
    <chat></chat>
</div>
<script src="../js/vue.js"></script>
<script>
    Vue.component("chat",{
        template:`
            <div>
                <ul>
                    <li v-for="value in arr">{{value}}</li>
                </ul>
                <user @send='revMsg' userName="Jack"></user>
                <user @send='revMsg' userName="rose"></user>
            </div>
            `,
        data:function(){
            return{
                arr:[]
            }
        },
        methods:{
            revMsg:function(txt){
                this.arr.push(txt)
            }

        }
    }),
            Vue.component('user',{
                props:['userName'],
                template:`
          <div>
             <label>{{userName}}</label>
             <input type='text' v-model='inputVal'>
             <button @click='sendMsg'>发送</button>
          </div>
        `,
                data:function(){
                    return{
                        inputVal:''
                    }
                },
                methods:{
                    sendMsg:function(){
                        this.$emit('send',this.userName+':'+this.inputVal)
                        this.inputVal=''
                    }
                }
            })
    new Vue({
                el:"#app"
            })
</script>

效果如下：

Image 1.png

2.非父子之间传值

<div id="app">
    <child></child>
    <son></son>
</div>
<script src="../js/vue.js"></script>
<script>
    var bus=new Vue()
    Vue.component('child',{// A
        template:`
            <div>
                <h1>我是child组件</h1>
                 <button @click='sendMsg'>发送数据给son</button>
            </div>
        `,
        data:function(){
            return{
                msg:' Hello Vue'
            }
        },
        methods:{
            sendMsg:function(){
                bus.$emit('send',this.msg)
            }
        }
    })
    Vue.component('son',{//B
        template:`
             <div>
                <h1>我是son组件</h1>
                 <a href="">{{mess}}</a>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
        },
        mounted:function(){
            bus.$on('send',msg=>{//箭头函数
                /*console.log(this);*/
                this.mess=msg
            })
        }

    })
    new Vue({
        el:'#app'
    })
</script>

效果如下：

Image 1.png

3.生命周期

<div id='app'>{{msg}}</div>
<script src='../js/vue.js'></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'hello vue'
        },
        beforeCreate:function(){
            alert('beforeCreated');
        },
        created:function(){
            alert('created')
        },
        beforeMount:function(){
            alert('beforMount')
        },
        mounted:function(){
            alert('mounted')
        }
    })
</script>