同级之间传值

一.父子组件

1.父组件到子组件通讯
父组件到子组件的通讯主要为：子组件接受使用父组件的数据，这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function)。Vue提倡单项数据流，因此在通常情况下都是父组件传递数据给子组件用，子组件出发父组件的事件，并传递给父组件所需的参数。

2.通过Props传递数据
父子通讯中最常见的数据传递方式就是通过props传递数据，就好像方法的传参一样，父组件调用子组件并传入数据，子组件接收到父组件传递的数据进行验证使用

3.通过$on传递父组件方法
通过on传递父组件方法是通信中常用的方法传递方式。他可以通过props传递方法达到相同效果。相比于props传递function，它更加的直观和显示的表现出了调用关系

父子组件通信例子：

<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='rcvMsg' userName='jack'></user>
              <user @send='rcvMsg' userName='rose'></user>
           </div>
       `,
        data:function(){
            return{
                arr:[]
            }
        },
        methods:{
            rcvMsg: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)
          }
        }
    }) 
    new Vue({
        el:'#app'
    })
    </script>

效果如下：

父子相传.png

二.生命周期
1.每个Vue的实例再被创建之前都要经过一系列的初始化过程，这个过程就是Vue的生命周期

2.Vue的所有钩子函数：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

生命周期例子：

<div id='app'>{{msg}}</div>
    <script src='vue/dist/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>

效果如下：

1.png 2.png 3.png 4.png 效果.png