子传父$emit()

作者: SuperHong521 | 来源:发表于2018-09-21 19:11 被阅读0次

vue的.sync方法
Vue组件通讯的实现方法有哪些？
vue2.0专题：通信
vue5
vue第六章
2018-09-21组件（子给父传）
Vue组件通信，父传子，子传父
vue组件如何通信
Vue传值
Vue父子组件之间的通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div class="box">
       <my-father></my-father>
   </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component("my-father",{
            template:`
                <div>
                    <p>内容:{{message}}</p>
                    <my-child @sentMsg="sent"></my-child>//第一个子组件第二个父组件为了调用
                </div>
            `,
            data:function(){
                return{
                    message:''//为了父组件方便接收
                }
            },
            methods:{
                sent:function(text){//text是形参   子组件内函数是实参
                    this.message=text
                }
            }
        })
        
        Vue.component("my-child",{
            template:`
                <div>
                    <input type="text" v-model="messages"/>
                    <button @click="add">添加</button>//加button是为了触发事件
                </div>
            `,
            data:function(){
                return{
                    messages:""//数据必须写在子组件中
                }
            },
            methods:{
                add:function(){
                    this.$emit("sentMsg",this.messages)
                    this.messages=""
                }
            }
        })
        
        new Vue({
            el:".box"
        })
    </script>
</body>
</html>

QQ图片20180921191212.png