JavaScript入门 组件/组件通讯:父传子/子传父/refs属性 Day03
组件
什么是组件
组件是可复用的 Vue 实例，且带有一个名字：我们可以把组件作为自定义元素来使用，
例如:
以不同的组件来划分不同的功能模块，需要什么功能就去调用对应的模块
为什么在vue组件中data要写成函数而不是对象？
1. vue组件本质上是一个vue实例对象
2. 如果data是对象，所有vue组件实例对象都会共享data对象数据，
如果A组件改变了数据，B组件会受到影响.
3. 定义成函数，函数有自己的块作用域，每个vue实例都有自己的data块作用域相互不影响
组件化和模块化的区别
组件化：是从UI界面的角度进行划分的，根据封装的思想，把页面上可重用的 UI，结构封装为组件，从而方便项目的开发和维护。
模块化：是从代码的逻辑角度去划分的 方便代码分层开发保证每个功能模块的职能单一
使用组件
{{title}}
组件通讯
父传子 props
在子组件定义props选项，接收参数
在父组件里定义属性传参, 属性名与props选项接收参数属性名相同
{{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.名称
可获取整个节点内容，通过对象.方法调用里面的方法、元素等