vue组件父子组件通信

作者: 张鑫冲 | 来源:发表于2018-09-23 19:04 被阅读0次

Vue相关知识点
Vue如何实现组件通信？
Vue事件总线（EventBus）
vue2中eventbus遇到的坑
Vue事件总线（EventBus）使用详细介绍
VUE - EventBus
vue组件间通信的一些实用方法（VUE2.x）
VUE03
Vue组件通信
VUE组件（传值，生命周期）

父子组件通信添加效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <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>
</body>
</html>