JavaScript入门 组件/组件通讯:父传子/子传父/refs属性 Day03

组件


什么是组件

组件是可复用的 Vue 实例,且带有一个名字:我们可以把组件作为自定义元素来使用,
例如:

以不同的组件来划分不同的功能模块,需要什么功能就去调用对应的模块

为什么在vue组件中data要写成函数而不是对象?

        1. vue组件本质上是一个vue实例对象

        2. 如果data是对象,所有vue组件实例对象都会共享data对象数据,

             如果A组件改变了数据,B组件会受到影响.

        3. 定义成函数,函数有自己的块作用域,每个vue实例都有自己的data块作用域相互不影响

组件化和模块化的区别

组件化:是从UI界面的角度进行划分的,根据封装的思想,把页面上可重用的 UI,结构封装为组件,从而方便项目的开发和维护。

模块化:是从代码的逻辑角度去划分的 方便代码分层开发保证每个功能模块的职能单一

使用组件

        

{{title}}

//3.将组件名用-分开使用组件

组件通讯


父传子 props

子组件定义props选项,接收参数

父组件里定义属性传参, 属性名props选项接收参数属性名相同


//child子组件 props:['user'] props:{ user:Object } props:{ user:{ type:Object, defaule:{} } }
		

{{title}}

//显示'父组件'

子传父

 法一 在外部定义: 在子组件上绑定一个自定义事件 <子组件的@click"$emit('someEvent') ">

				template: `

{{title}}

`

 法二 在内部定义: this.$emit('someEvent',参数) 

       template: `

{{title}}

` //组件Child methods:{ onEmitEvent(){ //触发自定义事件 this.$emit('someEvent',this.count) //count是data()里的 这里的自定义事件用驼峰命名 }

在使用子组件的地方用刚刚自定义的事件,就是body里用-把驼峰命名分开的div里

@some-event="callback"

        

{{title}}

显示子组件内容: {{num}}

//用-将事件的驼峰命名分开
               methods:{  //父组件的方法里
                    callback(num){
                        // alert('触发自定义事件someEvent :'+num)
                        this.num = num
                    }
                }

refs属性

定义

ref    普通元素上

        组件上

ref="名称"

   

元素一

//可在普通元素上 //在需要的子组件上

获取

this.$refs.名称

可获取整个节点内容,通过对象.方法调用里面的方法、元素等

    
                    
                    

你可能感兴趣的:(三阶段,javascript,前端,开发语言)