组件中的自定义事件

每个Vue实例都实现了事件接口（Events interface）：使用$on(eventName)监听事件使用$emit(eventName)触发事件

使用v-on绑定自定义事件

什么是子组件什么是父组件

<div> // 对于child来说这就是个父组件
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child> // 这就是子组件
</div>

组件中的自定义事件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app1">
    
    <first-com  v-on:inc="fuhanshu"></first-com>  <!-- 三：inc事件被触发后触发父函数 -->
      {{totol}}
</div>

</body>
<script type="text/javascript">
    Vue.component('first-com', {
        template: "<button v-on:click='zihanshu'>+1</button>",//一：子组件中点击触发子组件函数
        methods:{
            zihanshu:function(){
                this.$emit("inc"); //二：子组件函数被触发后触发inc
            }
        }
    
    
    })

    

    var v1 = new Vue({
        el: "#app1",
        data: {
        
            totol:1
        },
        methods:{
            fuhanshu:function(){
                this.totol++;    //四：父函数触发后执行 
            }
        }
    })


</script>
</html>