前端(vue)学习笔记(CLASS 4):组件组成部分与通信

发布于:2025-03-17 ⋅ 阅读:(21) ⋅ 点赞:(0)

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

注意点:

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

2、全局样式(默认),影响所有组件;局部样式,scoped下样式,只作用于当前组件

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

样式注意点:

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

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

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

scoped原理

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

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

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

2、data函数

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

例如:

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

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

3、组件通信

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

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

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

组件关系分类:

1、父子关系

2、非父子关系

1、父子关系通信

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

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

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

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

props:['属性名']

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

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

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

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

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

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

2、prop详解

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

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

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

校验:

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

语法:

1、类型校验

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

2、非空校验

3、默认值

4、自定义校验

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

prop&data

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

区别:

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

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

3、非父子关系通信

利用event bus事件总线

作用:完成非父子组件之间,进行简易消息传递(复杂场景,vuex)

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

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

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

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

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

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

4、v-model原理

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

作用:提供双向数据绑定

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

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

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

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

1、表单类组件封装

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

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

2、子传父:监听输入,子传父传值给父组件修改

  <select :value="cityId" @change="handleChange"></select>
props: {
  cityId: String
}
  methods: {
    handleChange(e) {
      this.$emit('事件名',e.target.value)
    }
}
2、父组件v-model简化代码,实现父子双向绑定

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

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

  <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更新完后,才会触发执行此方法里的函数

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