模块化开发（为自定义组件添加事件）

为自定义组件添加事件的步骤：

以vue-cli-demo为例（该项目使用的是webpack-simple模板）

 

1、新建自定义组件

在component文件夹下新建自定义组件，命名为myButton.vue，并写myButton.vue里面的代码内容。

 

2、使用自定义组件myButton.vue

在页面APP.vue中使用自定义组件myButton.vue的步骤：

• 第一步：在App.vue文件的<script></script>内中引入自定义组件myButton.vue，引入后名字为MyButton
• 第二步：使用components组件注册自定义组件MyButton
• 第三步：使用自定义组件MyButton，添加点击事件，并在点击事件click后加修饰符.native才生效   @click.native=showMsg”
• 第四步：写点击事件函数showMsg。

 

3、打开看效果

运行npm run dev ，查看自定义组件中按钮点击的效果。