【Vue】模板语法，事件处理器及综合案例、自定义组件、组件通信

一、事件处理器

我们之前事件监听可以使用v-on 指令

1、事件修饰符

在Vue中我们通过由点(.)表示的指令后缀来调用修饰符，比如：

1.   .stop：阻止事件冒泡。当事件触发时，该修饰符将停止事件进一步冒泡到父元素。相当于调用了 event.stopPropagation()
2.   .prevent：阻止默认事件。默认情况下，某些元素会有默认的事件行为，比如标签的点击跳转，使用.prevent 可以阻止默认事件的触发。相当于调用了 event.preventDefault()。
3.   .capture：使用事件捕获模式。默认情况下，事件是在冒泡阶段处理的（即从子元素到父元素）。使用 .capture 修饰符将事件处理移到事件捕获阶段（即从父元素到子元素）。
4.   .self：只触发当前元素本身的事件。当事件绑定在子元素上时，该修饰符只允许事件在子元素上触发，而不会触发父元素上相同事件。
5.   .once：：只触发一次事件。使用 .once 修饰符可以确保事件只被触发一次，之后该事件监听器会自动被移除。

  
  
  
  

  
  
  
  

  
  
...
  
  
...
  
  

2、冒泡案例(.stop)

    
    
    
    
    
    





    
冒泡事件
    

        

            

                

                
            
        
    

当我们加上了.stop修饰符

    
    
    
    
    
    





    
冒泡事件
    

        

            

                

                
            
        
    

3、触发案例(.once)

    
    
    
    
    
    




    
点击
    
    提交

添加.once之后只能点击一次

    
    
    
    
    
    




    
点击
    
    提交

4、综合案例(表单)

需要注意的是复选框v-model="hobbyMax"中的hobbyMax使用数组来接收

    
    
    
    
    
    



    姓名：

    密码：

    
    年龄：

    性别：
    

        {{s.name}}

    
    爱好：
    

        {{h.name}}
    
    类别：
    
        {{t.name}}
    

    备注：
    
    

    确认
    

效果演示

二、自定义组件

1、 vue组件

 1.1、组件简介

      组件(Component)是Vue最强大的功能之一

      组件可以扩展HTML元素，封装可重用的代码

      组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

  1.2、 全局和局部组件

• 全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
• 局部组件: new Vue({el:'#d1',components:{...}})

      注册后，我们可以使用以下方式来调用组件：

  1.3 props

      props是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

   1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods

        以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

   2：当我们定义这个 组件时，你可能会发现它的data并不是像这样直接提供一个对象

  

      data: {

          count: 0

        }

        取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

        data: function () {

          return {

            count: 0

          }

        }

 

    3：定义组件名的方式有两种

         短横线分隔命名(建议使用)

         Vue.component('my-component-name', { /* ... */ })，

引用方式：

         首字母大写命名

       

  Vue.component('MyComponentName', {  ...  })，
    引用方式： 和都是可接受的  

    4：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，

         camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

       

  props: ['postTitle'],

    5：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

         希望每个 prop 都有指定的值类型  

       props: {

           title: String,

           likes: Number,

           isPublished: Boolean,

           commentIds: Array,

           author: Object,

           callback: Function,

           contactsPromise: Promise // or any other constructor

         }

2、案例

三、组件通信

1. 自定义事件

1.    监听事件：$on(eventName)
2.    触发事件：$emit(eventName)

   1.1、Vue自定义事件是为组件间通信设计  

        vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

1.         父Vue->子Vue，通过prop传递数据
2.         子Vue->父Vue，通过事件传递数据

   1.2、事件名

        不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

        建议使用“短横线分隔命名”

2、案例

2.1、父传子

    
    
    
    



    
父传子1
    
    
父传子2
    

2.2、子传父

    
    
    
    



    
子传父