Vue模块语法下(事件处理器&自定义组件&组件通信)

                                                                文章目录

一、事件处理器

事件修饰符

二、自定义组件

组件简介

全局和局部组件

 props

小结

 三、表单综合案例(vue三期博客内容综合)

---

一、事件处理器

事件修饰符

  Vue通过由点(.)表示的指令后缀来调用修饰符，

  .stop

  .prevent

  .capture

  .self

  .once

 

 

我们先看一下现在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选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

data: function () {

          return {

            count: 0

          }

        }   

    

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

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

         Vue.component('my-component-name', { /* ... */ })，引用方式：

         首字母大写命名

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

在定义的按钮中没有添加任何内容，但是上输出了小坤的按钮的字样，为什么呢；原因是vue在渲染的时候，自动挂载template模板

父组件

	
		
		
		
	
	
		

			
简单组件的定义
			
			
父组件传参给子组件
			
			
		
	
	

 子组件    子组件将参数传递给父组件的关键在于1.$emit 2.自定义事件

	
		
		
		
	
	
		

			
父组件传参给子组件
			
			
		
	
	

 

小结

定义组件：template

父传子：props     

子传父：通过$emit注册事件名，语法this.$emit('事件名'，....)    这里一般是json对象 

 三、表单综合案例(vue三期博客内容综合)

    
    



    
    

        姓名：

        密码：

        性别：
            男
            女

        爱好：
        

            {{l.name}}
        
  

        英语等级：
        
            {{e.name}}
        
        
        

        
        
    

主要注意复选框的数据源与要传递到后台的数据，如爱好，当我们选中时，我们要传递到后台的是其选中的id，而且可能选择多个，所以我们在这就自定义一个数组来接收其值

---

 

HBuilder X中快速生成html代码快捷键---tab键