vue.js 自定义事件

Posted 2021-01-22 hujun-2018

<div id="app">
    <h2>{{num}}</h2>  
    <h1>全局组件</h1>
    <my-component @myclick="vueAdd"></my-component>  <!-- 渲染全局组件-->
</div>
</body>
</html>
<script>
/* 

*/

    Vue.component(‘my-component‘,{     // 全局组件语法
        template:`<div>                //模板字符串
                     <h2>{{n}}</h2>
                     <button @click="add">+1</button>
                  </div>`,
        data(){                        //data是个函数，初始化全局组件的变量n
            return {
                n:0   
            }
        },
        methods:{           
            add(){                      //这里定义的方法只用在全局组件中的template中
                this.n += 1;
                this.$emit(‘myclick‘);   //$emit自定义事件 $emit(事件名字) 不要使用驼峰
            }
        }
    });
//实例化
    new Vue({
        el:‘#app‘,
        data:{
            num:0    //初始化 num     // 实例化中的data是个josn形式的对象，初始化#app容器中的变量
        },
        methods:{                   // 实例化中的methods方法也用在 #app 容器里使用
            vueAdd(){ 
                this.num += 1;  
            }
        }
    })
</script>