Vue-组件通信&进阶用法

Vue-组件通信&进阶用法

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

结构 :只有一个根元素

样式

逻辑

组件的样式冲突 scoped

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

scoped原理？

1. 当前组件内标签都被添加 data-v-hash值 的属性
2. css选择器都被添加 [data-v-hash值] 的属性选择器
   最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

data 是一个函数

一个组件的 data 选项必须是一个函数。→ 保证每个组件实例，维护独立的一份数据对象。
每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。

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

二.组件通信

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

1.父组件–>子组件( props )

①父中给子添加属性传值

<Son :title='myTitle'></Son>   

② 子props(export default中) 接收

props :['title']   

③ 子组件使用**{{title}}**

2.子组件–>父组件 ($emit)

① 子$emit 发送消息:

methods:{子中事件名(){ this.$emit(自定义事件名,'数据1','数据2',...)}}    

②父中给子添加消息监听**@自定义事件名=‘父中事件名’**

③ 父中实现处理函数methods:{父中事件名(形参){处理逻辑}}

3.props 校验

简单的类型校验:

props: {
  校验的属性名: 类型 // Number String Boolean ...
},

完整校验:( ① 类型校验 ② 非空校验 ③ 默认值 ④ 自定义校验 )

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

4.prop & data、单向数据流

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

区别：
data 的数据是自己的 → 随便改
prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的。

谁的数据谁负责

三.进阶用法

1.v-model 原理

原理：v-model本质上是一个语法糖。例如应用在输入框上，就是 value属性 和 input事件 的合写。
作用：提供数据的双向绑定
① 数据变，视图跟着变 :value
② 视图变，数据跟着变 @input
注意：$event 用于在模板中，获取事件对象

2.表单类组件封装 & v-model 简化代码

1.表单类组件 封装

→ 实现 子组件 和 父组件数据 的双向绑定
① 父传子：数据 应该是父组件 props 传递 过来的，拆解 v-model 绑定数据
② 子传父：监听输入，子传父传值给父组件修改

父组件:

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

子组件:

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

props: {
  cityId: String
},

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

2.父组件 v-model 简化代码

→ 实现 子组件 和 父组件数据 的双向绑定
① 子组件中：props 通过 value 接收，事件触发 input
② 父组件中：v-model 给组件直接绑数据( :value + @input )

父组件:

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

子组件:

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

props: {
  value: String
},

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

3…sync 修饰符

作用：可以实现 子组件 与 父组件数据 的 双向绑定，简化代码
特点：prop属性名，可以自定义，非固定为 value
场景：封装弹框类的基础组件， visible属性 true显示 false隐藏
本质：就是 :属性名 和 @update:属性名 合写

父组件:

<BaseDialog :visible.sync="isShow" />
--------------------------------------
<BaseDialog 
  :visible="isShow" 
  @update:visible="isShow = $event" 
/>

子组件:

props: {
  visible: Boolean
},

this.$emit('update:visible', false)

4.ref 和 $refs

1. 目标标签 – 添加 ref 属性

     <div ref="chartRef">我是渲染图表的容器</div>
   

2. 恰当时机, 通过 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ole.log(**this.refs.chartRef) },

5.Vue异步更新、$nextTick

$nextTick：等DOM更新后,才会触发执行此方法里的函数体语法:\ast \ast this.$nextTick(函数体)**

this.$nextTick(() => {
  this.$refs.inp.focus()  // 获取焦点
})