前端（vue)学习笔记（CLASS 4）：组件组成部分与通信

1、组件的三大组成部分（结构/样式/逻辑）

注意点：

1、结构只能有一个根元素

2、全局样式（默认），影响所有组件；局部样式，scoped下样式，只作用于当前组件

3、el根实例独有，data是一个函数，其他配置项一致

样式注意点：

默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题

1、全局样式：默认组件中的样式会作用到全局

2、局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

scoped原理

1、当前组件内标签都被添加上data-v-hash值的属性

2、css选择器都被添加[data-v-hash]的属性选择器

最终效果：必须是当前组件的元素，才会有这个自定义的属性，才会被这个样式作用到

2、data函数

一个组件的data选项必须是一个函数，保证每个组件实例维护独立的一份数据对象

例如：

javascript 复制代码

data() {
    return {
        count: 100
    }
},

每次创建新的组件实例，都会新执行一次data函数，得到一个新对象

3、组件通信

组件通信，就是指组件与组件之间的数据传递

组件的数据是独立的，无法直接访问其他组件的数据

想用其他组件的数据->组件通信

组件关系分类：

1、父子关系

2、非父子关系

1、父子关系通信

1、父组件通过props将数据传递给子组件

具体流程，在父组件中，如果调用了子组件，需要给子组件添加一个自定义属性，在头标签：

html 复制代码

<div :属性名="传递的参数名"></div>

之后在子组件中添加配置项props

javascript 复制代码

props:['属性名']

即可在子组件中使用父组件的参数

2、子组件利用$emit通知父组件修改更新

具体流程，在子组件中使用$emit，可能会放在函数里

javascript 复制代码

handClick () {
    this.$emit('通知','修改后的数据')
}

然后在父组件中的子组件内加上@changTitle="函数名"，用于监听事件

创建一个函数，函数的参数为新参数的名字，最后在函数内进行修改

2、prop详解

prop定义：组件上注册的一些自定义属性

Prop作用：向子组件传递数据

特点：可以传递任意数量和任意类型的prop

校验：

作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示，帮助开发者，快速发现错误

语法：

1、类型校验

javascript 复制代码

props: {
    校验的属性名：类型
}

2、非空校验

3、默认值

4、自定义校验

javascript 复制代码

props:{
    校验的属性名：{
        type：类型，
        required：true，//是否必填
        default：默认值，//morz
        validator（value） {
            //自定义校验逻辑
            return 是否通过校验
        }
    }
}

prop&data

共同点：都可以给组件提供数据

区别：

data的数据是自己的，可以随意修改

prop的数据是外部的，不能直接改，要遵循单向数据流

3、非父子关系通信

利用event bus事件总线

作用：完成非父子组件之间，进行简易消息传递（复杂场景，vuex）

1、创建一个都能访问到的事件总线（空Vue实例），utils/EventBus.js

javascript 复制代码

import Vue form 'vue'
const Bus = new Vue()
export default Bus

2、接收方，监听Bus实例的事件

javascript 复制代码

created() {
  Bus.$on('sendMsg',(msg) => {
    this.msg=msg
  })
}

3、发送方，触发Bus实例的事件

javascript 复制代码

Bus.$emit('sendMsg','这是一个消息')

4、v-model原理

原理：v-model本质上是语法糖，例如在输入框上，就是value属性和input事件的合写

作用：提供双向数据绑定

1、数据变，视图跟着变:value

2、视图变，数据跟着变@input

注意：$event用于在模板中，获取事件的形参

5、表单类组件封装&v-model简化代码

1、表单类组件封装

1、父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据

javascript 复制代码

<BaseSelect :cityId="selectId" @事件名="selectedId=$event"></BaseSelect>

2、子传父：监听输入，子传父传值给父组件修改

html 复制代码

  <select :value="cityId" @change="handleChange"></select>

javascript 复制代码

props: {
  cityId: String
}

javascript 复制代码

  methods: {
    handleChange(e) {
      this.$emit('事件名',e.target.value)
    }
}

2、父组件v-model简化代码，实现父子双向绑定

1、子组件中：prop通过value接收，事件触发input

2、父组件中：v-model给组件直接绑数据(:value+@input)

html 复制代码

  <BaseSelect v-model="selectId"></BaseSelect>

6、.sync修饰符

作用：可以实现子组件与父组件数据的双向绑定，简化代码

特点：prop属性名，可以自定义，非固定为value

场景：封装弹框类的基础组件，visible属性 true显示false隐藏

用法，直接在属性名后加上即可

在子组件中利用props接收，并且用$emit通知，其中的事件名为update:属性名

7、ref和$refs

作用：利用这个可以用于获取dom元素，或组件实例

特点：查找范围->当前组件内（更精确稳定）

1、获取dom：

目标标签-添加ref属性，属性值自拟

恰当时机，通过this.$refs.ref属性值，获取目标标签

要在mounted后才能进行获取

2、获取组件实例

目标组件，添加ref属性

恰当时机，通过this.$refs.xxx，获取目标组件，就可以调用组件对象里面的方法

8、Vue异步更新

使用$nextTick:等dom更新完后，才会触发执行此方法里的函数

javascript 复制代码

this.$nextTick(() => {
    this.$refs.inp.focus()
})