vue.js|Vue模块语法下(事件处理器&自定义组件&组件通信) 前端|javascript

文章目录
一、事件处理器
事件修饰符

二、自定义组件
组件简介
全局和局部组件
props
小结
三、表单综合案例(vue三期博客内容综合)

一、事件处理器事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰符，

.stop
.prevent
.capture
.self
.once

.azure{ height: 400px; width: 400px; background-color: azure; } .pink{ height: 300px; width: 300px; background-color: pink; } .plum{ height: 200px; width: 200px; background-color: plum; } .yellow{ height: 100px; width: 100px; background-color: yellow; }

我们先看一下现在html代码的运行效果

文章图片

为什么要先看这个嘞，原因是想先看一下事件冒泡的一个小问题，在实际编码中十分忌讳的一个问题，给这4个div分别绑定事件

文章图片

文章图片

接下来看当前效果内层div触发外层div事件

文章图片

文章图片

像遇到这样的问题呢，我们就可以使用到阻止冒泡事件来完成
怎么阻止嘞，只需要在点击事件前面添加冒泡事件名就好了，这样点击最内层div也不会触发外层

文章图片

文章图片

...

...

二、自定义组件 vue组件
组件简介组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
全局和局部组件全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
props props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods以及生命周期钩子，仅有的例外是像el这样根实例特有的选项

注2：当我们定义这个组件时，你可能会发现它的data并不是像这样直接提供一个对象
data: {
count: 0
}取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
【vue.js|Vue模块语法下(事件处理器&自定义组件&组件通信)】data: function () {
return {
count: 0
}
}

注3：定义组件名的方式有两种
短横线分隔命名(建议使用)
Vue.component('my-component-name', { /* ... */ })，引用方式：
首字母大写命名
Vue.component('MyComponentName', { /* ... */ })，引用方式：和都是可接受的