day04vue学习

news2025/10/31 17:47:54

day04

一、学习目标

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

​ scoped解决样式冲突/data是一个函数

2.组件通信

  1. 组件通信语法
  2. 父传子
  3. 子传父
  4. 非父子通信（扩展）

3.综合案例：小黑记事本（组件版）

  1. 拆分组件
  2. 列表渲染
  3. 数据添加
  4. 数据删除
  5. 列表统计
  6. 清空
  7. 持久化

4.进阶语法

  1. v-model原理
  2. v-model应用于组件
  3. sync修饰符
  4. ref和$refs
  5. $nextTick

二、scoped解决样式冲突

1.默认情况：

写在组件中的样式 style 会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

  1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响

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

2.代码演示

BaseOne.vue

<template>
  <div class="base-one">
    BaseOne
  </div>
</template>

<script>
export default {

}
</script>
<style>
    div {
      border: 3px solid blue;
      margin: 30px;
    }
    // 默认的style样式，会做用到全局
    // 由于没加scoped，是全局的样式，根组件 App，普通组件 BaseOne 和 BaseTwo 中的 div 都会收到影响
</style>

BaseTwo.vue

<template>
  <div class="base-one">
    BaseTwo
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  // 加了 scoped 是局部作用
  
</style>

scoped 原理：

  1. 给当前组件模板的所有元素，都会被添加上一个自定义属性

    data-v-hash值 同一个组件的 hash 值是一样的 比如：data-v-5f6a9d56 ，区分开不同的组件

  2. 实际在heml页面中的效果是： css 选择器后面，被自动处理,添加上了属性选择器 div[data-v-5f6a9d56]

  3. 在 vue 文件中写的每一个style样式，在html页面中都变成了类似上面的属性选择器

App.vue

<template>
  <div id="app">
    <BaseOne></BaseOne>
    <BaseTwo></BaseTwo>
  </div>
</template>

<script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {
  name: 'App',
  components: {
    BaseOne,
    BaseTwo
  }
}
</script>

3.scoped原理

  1. 当前组件内标签都被添加data-v-hash值 的属性
  2. css选择器都被添加 [data-v-hash值] 的属性选择器

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

在这里插入图片描述

4.总结

  1. style的默认样式是作用到哪里的？
  2. scoped的作用是什么？
  3. style中推不推荐加scoped？

三、data必须是一个函数

1、data为什么要写成函数

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

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

根组件的 data 是一个data对象，而以前不用vue脚手架中写的vue中的对象的data也是一个data对象。

可能是组件中的组件的data必须是一个data函数？不清楚，以后再研究。

在这里插入图片描述

2.代码演示

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      count: 100,
    }
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

App.vue

<template>
  <div class="app">
    <BaseCount></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount'
export default {
  components: {
    BaseCount,
  },
}
</script>

<style>
</style>

3.总结

data写成函数并返回一个对象的目的是什么？

目的：保证每个组件实例，维护独立的一份数据对象。

解释：为了每一次在使用这个组件时，组件之间的data数据是相互独立的。如果不写成函数并返回一个对象，而是直接写成一个对象，到时候重复使用这个组件时会使用同一个data对象中的数据。而且如果不写成data函数，会直接报错。

四、组件通信

1.什么是组件通信？

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

  • 组件的数据是独立的，无法直接访问其他组件的数据。
  • 想使用其他组件的数据，就需要组件通信

2.组件之间如何通信

在这里插入图片描述

思考：

  1. 组件之间有哪些关系？
  2. 对应的组件通信方案有哪几类？

3.组件关系分类

  1. 父子关系
  2. 非父子关系

在这里插入图片描述

不知道，爷孙关系是怎么样的，比如:组件C中有一个组件D，组件A和组件D之间是爷孙关系，组件B和组件D是非父子关系。以后实验一下。

4.通信解决方案

在这里插入图片描述

5.父子通信流程

  1. 父组件通过 props 将数据传递给子组件
  2. 子组件利用 $emit 通知父组件修改更新

在这里插入图片描述

6.父向子通信代码示例

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

父组件App.vue

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件 
      
    <!-- 2. 父组件对消息进行监听 -->
    <Son :title="myTitle" @changeTitle="changeFn"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端，就来黑马程序员',
    }
  },
  methods: {
    // 3. 提供处理函数，提供逻辑
    changeFn (newTitle) {
      this.myTitle = newTitle;
    }
  }
  components: {
    Son,
  },
}
</script>

<style>
</style>

子组件Son.vue

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    我是Son组件 {{ title }}
    <button @click="handleClick">修改title</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  props: ['title'], // 这里的属性名必须要根传值时的属性名相同
  methods: {
    handleClick () {
      // 1. 子组件是无法直接通知父组件的，可以用 $emit 触发事件，给父组件发出消息通知
      this.$emit('changeTitle', '消息改变了');
    }
  }
}
</script>

<style>

</style>

在这里插入图片描述

父向子传值步骤

  1. 给子组件以添加属性的方式传值
  2. 子组件内部通过props接收
  3. 模板中直接使用 props接收的值
  4. props其实就是给组件添加的一个一个自定义标签属性，像 img 中的 src 属性，通过这种方式来给子组件传值。

7.子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

在这里插入图片描述

子向父传值步骤

  1. $emit触发事件，给父组件发送消息通知
  2. 父组件监听$emit触发的事件
  3. 提供处理函数，在函数的性参中获取传过来的参数

8.总结

  1. 组件关系分类有哪两种
  2. 父子组件通信的流程是什么？
    1. 父向子
    2. 子向父

五、什么是props

1.Props 定义

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

2.Props 作用

向子组件传递数据

3.特点

  1. 可以 传递 任意数量 的prop
  2. 可以 传递 任意类型 的prop

在这里插入图片描述

4.代码演示

父组件App.vue

<template>
  <div class="app">
    <UserInfo
      :username="username"
      :age="age"
      :isSingle="isSingle"
      :car="car"
      :hobby="hobby"
    ></UserInfo>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>

<style>
</style>

子组件UserInfo.vue

<template>
  <div class="userinfo">
    <h3>我是个人信息组件</h3>
    <div>姓名：{{ username }}</div>
    <div>年龄：{{ age }}</div>
    <div>是否单身：{{ isSingle? 是 : 否 }}</div>
    <div>座驾：{{ car.brand }}</div>
    <div>兴趣爱好：{{ hobby.join(',')}}</div>
  </div>
</template>
      :username="username"
      :age="age"
      :isSingle="isSingle"
      :car="car"
      :hobby="hobby"
<script>
export default {
  props: ['username','age','isSingle','car','hobby'];
}
</script>

<style>
.userinfo {
  width: 300px;
  border: 3px solid #000;
  padding: 20px;
}
.userinfo > div {
  margin: 20px 10px;
}
</style>

六、props校验

1.思考

组件的props可以乱传吗

2.作用

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

3.语法

  • 类型校验
  • 非空校验
  • 默认值
  • 自定义校验

在这里插入图片描述

4.代码演示

App.vue

<template>
  <div class="app">
    <BaseProgress :w="width"></BaseProgress>
  </div>
</template>

<script>
import BaseProgress from './components/BaseProgress.vue'
export default {
  data() {
    return {
      width: 30,
    }
  },
  components: {
    BaseProgress,
  },
}
</script>

<style>
</style>

BaseProgress.vue

<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  // 将数组的写法改成对象的写法
  // 可接受的类型 Number String Boolean Array Object Function 等
  props: {
    w: Number
  },
}
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

七、props校验完整写法

1.语法

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

2.代码实例

<script>
export default {
  // 完整写法（类型、默认值、非空、自定义校验）
  props: {
    w: {
      type: Number,
      // required: true, 
      default: 0, // 注意：required 和 default 不能同时存在
      validator(val) { // 这里的形参是可以拿到传过来的值的
        // console.log(val)
        if (val >= 100 || val <= 0) {
          return true
        } else {
          console.error('传入的范围必须是0-100之间')
          return false
        }
      },
    },
  },
}
</script>

3.注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

八、props&data、单向数据流

1.共同点

都可以给组件提供数据

2.区别

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

3.单向数据流：

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

4.代码演示

App.vue

<template>
  <div class="app">
    <BaseCount @changeCount="handleChange" :count="count"></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
    return {
      count: 666
    }
  },
  methods: {
    handleChange (newValue) {
      this.count = newVlaue;
    }
  }
}
</script>

<style>

</style>

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="handleAdd">-</button>
    <span>{{ count }}</span>
    <button @click="handleSub">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
  //data () {
  //   return {
  //     count: 100,
  //   }
  //},
  // 2.外部传过来的数据 不能随便修改
  props: {
    count: {
      type: Number,
   }, 
  },
  methods: {
    handleAdd () {
      // 子传父 this.$emit(事件名, 参数)
      this.$emit('changeCount', this.count + 1 );
      // 这里的参数不是 count++ 否则还是会报错
    },
    handleSub () {
      this.$emit('changeCount', this.count - 1 );
    }
  }
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

在这里插入图片描述

5.口诀

谁的数据谁负责

九、综合案例-组件拆分

1.需求说明

  • 拆分基础组件
  • 渲染待办任务
  • 添加任务
  • 删除任务
  • 底部合计 和 清空功能
  • 持久化存储

2.拆分基础组件

咱们可以把小黑记事本原有的结构拆成三部分内容：头部（TodoHeader）、列表(TodoMain)、底部(TodoFooter)

在这里插入图片描述

十、综合案例-列表渲染

思路分析：

  1. 提供数据：提供在公共的父组件 App.vue
  2. 通过父传子，将数据传递给TodoMain
  3. 利用v-for进行渲染

十一、综合案例-添加功能

思路分析：

  1. 收集表单数据 v-model
  2. 监听时间 （回车+点击 都要进行添加）
  3. 子传父，将任务名称传递给父组件App.vue
  4. 父组件接受到数据后 进行添加 unshift(自己的数据自己负责)

十二、综合案例-删除功能

思路分析：

  1. 监听时间（监听删除的点击）携带id
  2. 子传父，将删除的id传递给父组件App.vue
  3. 进行删除 filter (自己的数据自己负责)

十三、综合案例-底部功能及持久化存储

思路分析：

  1. 底部合计：父组件传递list到底部组件 —>展示合计
  2. 清空功能：监听事件 —> 子组件通知父组件 —>父组件清空
  3. 持久化存储：watch监听数据变化，持久化到本地

源码链接

十四、非父子通信-event bus 事件总线

1.作用

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

2.步骤

  1. 创建一个都能访问的事件总线 （空Vue实例）

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

  2. A组件（接受方），监听Bus的 $on事件

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

  3. B组件（发送方），触发Bus的$emit事件

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

    在这里插入图片描述

3.代码示例

EventBus.js

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

BaseA.vue(接受方)

<template>
  <div class="base-a">
    我是A组件（接收方）
    <p>{{msg}}</p>  
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  data() {
    return {
      msg: '',
    }
  },
  created () {
    // 2．在A组件(接收方)，进行监听Bus的事件（订阅消息)
    Bus.$on( 'sendMsg ' , (msg) => {
      // console.log(msg)
      this.msg = msg;
	})
  }
}
</script>

<style scoped>
.base-a {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

BaseB.vue(发送方)

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button @click="clickSend" >发送消息</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  methods: {
    clickSend () {
      // 3. B组件(发送方) 触发事件,用 $emit 的方式触发事件
      Bus.$emit('sendMsg', 'B组件成功触发了事件');
    }
  }
}
</script>

<style scoped>
.base-b {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

App.vue

<template>
  <div class="app">
    <BaseA></BaseA>
    <BaseB></BaseB> 
  </div>
</template>

<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue' 
export default {
  components:{
    BaseA,
    BaseB
  }
}
</script>

<style>

</style>

4.总结

1.非父子组件传值借助什么？

2.什么是事件总线

3.发送方应该调用事件总线的哪个方法

4.接收方应该调用事件总线的哪个方法

5.一个组件发送数据，可不可以被多个组件接收

十五、非父子通信-provide&inject

1.作用

跨层级共享数据

2.场景

在这里插入图片描述

3.语法

  1. 父组件 provide提供数据
export default {
  provide () {
    return {
       // 普通类型【非响应式】当父元素的相关值发生改变时，后代应用了父元素的值是不会发生改变的。
       color: this.color, 
       // 复杂类型【响应式】当父元素相关的值发生改变时，后代对应的值也会发生改变。
       userInfo: this.userInfo, 
    }
  }，
  data () {
    reutrn {
      color: 'pink', // 简单类型(非响应式)
      userInfo: { // 复杂类型(响应式) 推荐使用
        name: 'zs',
        age: 18
      }
    }
  }，
  methods: {
    change () {
      this.userInfo.name = "ls";
    }
  }
}

2.子/孙组件 inject获取数据

export default {
  inject: ['color','userInfo'],
  created () {
    console.log(this.color, this.userInfo)
  }
}

4.注意

  • provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
  • 子/孙组件通过inject获取的数据，不能在自身组件内修改

十六、v-model原理

1.原理：

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性 和 input事件 的合写

<template>
  <div id="app" >
    <input v-model="msg" type="text">

    <input :value="msg" @input="msg = $event.target.value" type="text">
  </div>
</template>

2.作用：

提供数据的双向绑定

  • 数据变，视图跟着变 :value
  • 视图变，数据跟着变 @input

3.注意

$event 用于在模板中，获取事件的形参，在行类样式中直接写 e 是无法拿到事件对象的，只能通过这种方式 $event 来拿到事件对象。

对于 input 和 click 事件而言，他的形参就是事件对象 e，在上面的 input 事件中，input 中代码的意思就是，当前的input值发生改变时，就将 input 的值实时的赋值给 msg，这就实现了双向数据的绑定。

4.代码示例

<template>
  <div class="app">
    <input type="text"  />
    <br /> 
    <input type="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: '',
    }
  },
}
</script> 
<style>
</style>

5.v-model使用在其他表单元素上的原理

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked属性和change事件。

不过咱们只需要掌握应用在文本框上的原理即可

十七、表单类组件封装

1.需求目标

实现子组件和父组件数据的双向绑定 （实现App.vue中的selectId和子组件选中的数据进行双向绑定）

2.代码演示

App.vue

<template>
  <div class="app">
    <BaseSelect
      :cityId="selectId"
      @changeId="selectId = $event"
    ></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
  data() {
    return {
      selectId: '102',
    }
  },
  components: {
    BaseSelect,
  },
}
</script>

<style>
</style>

BaseSelect.vue

<template>
  <div>
    <select :value="cityId" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    cityId: String
  },
  methods: {
    handleChange (e) {
      this.$emit('changeId', e.target.value)
    }
  }
}
</script>

<style>
</style>

十八、v-model简化代码

1.目标：

父组件通过v-model 简化代码，实现子组件和父组件数据 双向绑定

2.如何简化：

v-model其实就是 :value和@input事件的简写

  • 子组件：props通过value接收数据，事件触发 input
  • 父组件：v-model直接绑定数据

3.代码示例

子组件

<select :value="value" @change="handleChange">...</select>
props: {
  value: String
},
methods: {
  handleChange (e) {
    this.$emit('input', e.target.value)
  }
}

父组件

// v-model 的本质就是 :vaule + @input
<BaseSelect v-model="selectId"></BaseSelect>

十九、.sync修饰符

1.作用

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

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

简单理解：子组件可以修改父组件传过来的props值### 2.场景

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

3.本质

.sync修饰符 就是 :属性名 和 @update:属性名 合写

4.语法

父组件

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

子组件

props: {
  visible: Boolean
},

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

5.代码示例

App.vue

<template>
  <div class="app">
    <button @click="isShow = true">退出按钮</button>
    <BaseDialog :visible.sync="isShow"></BaseDialog>
  </div>
</template>

<script>
import BaseDialog from './components/BaseDialog.vue'
export default {
  data() {
    return {
      isShow: false,
    }
  },
  components: {
    BaseDialog,
  },
}
</script>

<style>
</style>

BaseDialog.vue

<template>
  <div class="base-dialog-wrap" v-show="isShow">
    <div class="base-dialog">
      <div class="title">
        <h3>温馨提示：</h3>
        <button @click="close" class="close">x</button>
      </div>
      <div class="content">
        <p>你确认要退出本系统么？</p>
      </div>
      <div class="footer">
        <button>确认</button>
        <button>取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShow: Boolean,
  }
}
</script>

<style scoped>
.base-dialog-wrap {
  width: 300px;
  height: 200px;
  box-shadow: 2px 2px 2px 2px #ccc;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
}
.base-dialog .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000;
}
.base-dialog .content {
  margin-top: 38px;
}
.base-dialog .title .close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  line-height: 10px;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}
.footer button {
  width: 80px;
  height: 40px;
}
.footer button:nth-child(1) {
  margin-right: 10px;
  cursor: pointer;
}
</style>

6.总结

1.父组件如果想让子组件修改传过去的值 必须加什么修饰符？

2.子组件要修改父组件的props值 必须使用什么语法？

二十、ref和$refs

1.作用

利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例

2.特点：

查找范围 → 当前组件内(更精确稳定)

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.box'));
// 由于document.querySelector('')是全局范围内的，因此，.box盒子前面也使用 .box 盒子时，会发生获取元素出错的现象。

3.语法

1.给要获取的盒子添加ref属性

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

2.获取时通过 $refs获取 this.$refs.chartRef 获取

mounted () {
  console.log(this.$refs.chartRef)
}

4.注意

之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子

5.代码示例

App.vue

<template>
  <div class="app">
    <BaseChart></BaseChart>
  </div>
</template>

<script>
import BaseChart from './components/BaseChart.vue'
export default {
  components:{
    BaseChart
  }
}
</script>

<style>
</style>

BaseChart.vue

<template>
  <div class="base-chart-box" ref="baseChartBox">子组件</div>
</template>

<script>
// yarn add echarts 或者 npm i echarts
import * as echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.baseChartBox)
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}
</script>

<style scoped>
.base-chart-box {
  width: 400px;
  height: 300px;
  border: 3px solid #000;
  border-radius: 6px;
}
</style>

ref和$refs

作用：利用 ref 和 $refs 可以用于获取 dom 元素或者组件实例

$refs 可以理解为当前vue文件下。$refs.组件名称，可以理解为当前vue文件下的某个组件。

获取组件

  1. 目标组件 - 添加 ref 属性
<BaseForm ref="baseForm"></BaseForm>
  1. 恰当时机，通过 this.$refs.xxx, 获取目标组件，就可以调用组件对象里面的方法
this.$refs.baseForm.组件方法();

二十一、异步更新 & $nextTick

1.需求

编辑标题, 编辑框自动聚焦

  1. 点击编辑，显示编辑框
  2. 让编辑框，立刻获取焦点

在这里插入图片描述

2.代码实现

<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button>确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="editFn">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
    }
  },
  methods: {
    editFn() {
        // 显示输入框
        this.isShowEdit = true;
        // vue的元素更新是异步的，所以在这里的时候，DOM元素还没有更新。
        // 获取焦点
        this.$refs.inp.focus() 
    }  },
}
</script>

3.问题

“显示之后”，立刻获取焦点是不能成功的！而且 this.$refs.inp 是 undefined。

原因：Vue 是异步更新DOM (提升性能)，当 this.isShowEdit = true 执行之后，就执行下面的语句了，并没有立刻更行 DOM 元素。因此，一执行 this.$refs.inp.forcus() 就会报错。

4.解决方案

$nextTick：等 DOM更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

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

注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例

也可以使用 setTimeout( '回调函数', 时间 ); 来解决，但是，setTimeout 函数不太方便准确掌握DOM元素更新的时间。

setTimeout(()=>{
  this.$refs.inp.focus();
}, 500);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1529208.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于python的线上购物商城系统

基于python的线上购物商城系统

技术&#xff1a;pythonmysqlvue 一、系统背景 如今的时代是信息化的时代&#xff0c;更种信息大爆炸。人们的基本工作生活中都离不开网络和计算机&#xff0c;现如今各类网站、管理系统、app都快速发展&#xff0c;为人们带来更便捷的生活体验。网站类的系统有宣传类网站、企…
阅读更多...
Unity类银河恶魔城学习记录11-2 p104 Inventoty源代码

Unity类银河恶魔城学习记录11-2 p104 Inventoty源代码

此章节相对较难理解&#xff0c;有时间单独出一章讲一下 Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili InventoryItem.cs…
阅读更多...
一文了解Python中的运算

一文了解Python中的运算

Python的运算符和其他语言类似 数学运算 >>>print 19 # 加法 >>>print 1.3-4 # 减法 >>>print 3*5 # 乘法 >>>print 4.5/1.5 # 除法 >>>print 3**2 # 乘方 >>>print 10%3 # 求…
阅读更多...
equals与时间序列攻击

equals与时间序列攻击

引言 随着信息技术的迅速发展&#xff0c;网络安全和隐私问题变得愈发重要。黑客和攻击者不断寻找新的攻击方法&#xff0c;其中之一是时间序列攻击&#xff08;Timing Attack&#xff09;。时间序列攻击是一种侧信道攻击&#xff0c;攻击者试图通过测量程序的执行时间来推断程…
阅读更多...
施工方项目管理软件哪个好？找企智汇施工项目管理软件！

施工方项目管理软件哪个好？找企智汇施工项目管理软件！

施工方项目管理软件市场上确实存在多个选择&#xff0c;每个软件都有其独特的特点和优势。而在这些选项中&#xff0c;企智汇施工项目管理系统以其卓越的性能和丰富的功能脱颖而出&#xff0c;成为众多施工方的必选软件。 企智汇施工项目管理系统在项目管理方面表现出色&#…
阅读更多...
【C++】用红黑树模拟实现set、map

【C++】用红黑树模拟实现set、map

目录 前言及准备&#xff1a;一、红黑树接口1.1 begin1.2 end1.3 查找1.4 插入1.5 左单旋和右单旋 二、树形迭代器&#xff08;正向&#xff09;2.1 前置 三、模拟实现set四、模拟实现map 前言及准备&#xff1a; set、map的底层结构是红黑树&#xff0c;它们的函数通过调用红…
阅读更多...
[已解决] vscode 跳转 python 代码失败

[已解决] vscode 跳转 python 代码失败

linux 环境下&#xff0c;"Ctrl 单击" 跳转函数定义失败&#xff0c;可以尝试下面的方法: setting -> 输入 go to definition -> 将下列两项配置改为 goto (不过当存在多个同名函数时&#xff0c;可能跳转会不符合预期)
阅读更多...
Vulnhub靶机渗透：DC-7打靶记录

Vulnhub靶机渗透：DC-7打靶记录

前言 自信自强&#xff0c;来自于不怕苦、不怕难的积淀。宝剑锋从磨砺出&#xff0c;梅花香自苦寒来&#xff1b;任何美好理想&#xff0c;都离不开筚路蓝缕、手胼足胝的艰苦奋斗&#xff01; 靶场介绍 DC-7是一个初中级的靶场&#xff0c;需要具备以下前置知识&#xff1a;…
阅读更多...
联发科MT8797迅鲲1300T规格参数_MTK5G安卓核心板方案定制

联发科MT8797迅鲲1300T规格参数_MTK5G安卓核心板方案定制

联发科MT8797&#xff08;迅鲲1300T&#xff09;平台采用Arm Cortex-A78和Cortex-A55组成的八核架构CPU&#xff0c;以及Arm Mali-G77MC9九核GPU&#xff0c;集成了AI处理器MediaTek APU&#xff0c;支持5G Sub-6GHz全频段和5G双载波聚合,支持1.08亿像素拍照和多镜头组合,以及1…
阅读更多...
每日五道java面试题之mybatis篇（五）

每日五道java面试题之mybatis篇（五）

目录&#xff1a; 第一题. 实体类属性名和表中字段名不⼀样 &#xff0c;怎么办?第二题. Mybatis是否可以映射Enum枚举类&#xff1f;第三题. Mybatis能执⾏⼀对⼀、⼀对多的关联查询吗&#xff1f;第四题. Mybatis是否⽀持延迟加载&#xff1f;原理&#xff1f;第五题. 如何获…
阅读更多...
SAP HCM 读取上月考勤结果

SAP HCM 读取上月考勤结果

转移前一期间都是累计读取上一个月de 数据&#xff0c;例如现在是4月&#xff0c;系统就会读取123月的累计 如果想只读取上个月的数据&#xff0c;就要设置前一期期间余额 因为一月只有31天 现在看3月 因为二月只有29天 2004年
阅读更多...
软件设计师18--IO管理软件

软件设计师18--IO管理软件

软件设计师18--IO管理软件 考点1&#xff1a;IO管理软件例题&#xff1a; 考点1&#xff1a;IO管理软件 例题&#xff1a; 1、I/O设备管理软件一般分为4个层次&#xff0c;如下图所示。图中①②③分别对应(D&#xff09;。 A、设备驱动程序、虚设备管理、与设备无关的系统软件…
阅读更多...
Java13_反转字符串中的单词 III(方法二String转换成字符数组）

Java13_反转字符串中的单词 III(方法二String转换成字符数组）

反转字符串中的单词 III 给定一个字符串 s &#xff0c;你需要反转字符串中每个单词的字符顺序&#xff0c;同时仍保留空格和单词的初始顺序。 示例 1&#xff1a; 输入&#xff1a;s "Lets take LeetCode contest" 输出&#xff1a;"steL ekat edoCteeL tset…
阅读更多...
退休人员档案管理系统

退休人员档案管理系统

退休人员档案管理系统是一种用于管理退休人员档案信息的软件系统。该系统可以实现退休人员档案的录入、查询、修改、删除和统计等功能&#xff0c;方便管理人员对退休人员档案信息进行有效管理。 玖拓智能退休人员档案管理系统可以通过录入退休人员的个人信息、退休时间、退休单…
阅读更多...
循环链表的用法

循环链表的用法

7.设 数 组 data[m] 作 为 循 环 队 列 SQ 的 存 储 空 间 &#xff0c;front 为 队 头 指 针 &#xff0c;rear 为 队 尾 指 针 &#xff0c;则 执 行 出 队 操 作 后 其 头 指 针 front 值 为 &#xff08; &#xff09; A&#xff0e;frontfront1 B&#xff0e;front(front1…
阅读更多...
MyBatis是纸老虎吗？（三）

MyBatis是纸老虎吗？（三）

上篇文章——《MyBatis是纸老虎吗&#xff1f;&#xff08;二&#xff09;》——梳理了MyBatis的执行流程&#xff0c;这篇文章想详细聊聊MyBatis的解析过程。当我把这个想法讲个同事时&#xff0c;他不可置信的说道&#xff1a;“这有什么好梳理的&#xff1f;难道你要介绍xml…
阅读更多...
腾讯春招后端一面（算法篇）

腾讯春招后端一面（算法篇）

前言&#xff1a; 哈喽大家好&#xff0c;前段时间在小红书和牛客上发了面试的经验贴&#xff0c;很多同学留言问算法的具体解法&#xff0c;今天就详细写个帖子回复大家。 因为csdn是写的比较详细&#xff0c;所以更新比较慢&#xff0c;大家见谅~~ 就题目而言&#xff0c;…
阅读更多...
实现：mysql-5.7.42 到 mysql-8.2.0 的升级（二进制方式）

实现：mysql-5.7.42 到 mysql-8.2.0 的升级（二进制方式）

实现&#xff1a;mysql-5.7.42 到 mysql-8.2.0 的升级&#xff08;二进制方式&#xff09; 1、操作环境1、查看当前数据库版本2、操作系统版本3、查看 Linux 系统上的 glibc&#xff08;GNU C 库&#xff09;版本&#xff08;**这里很重要&#xff0c;要下载对应的内核mysql版本…
阅读更多...
深入探讨医保购药APP的技术架构与设计思路

深入探讨医保购药APP的技术架构与设计思路

随着移动互联网的发展&#xff0c;医疗保健行业也迎来了数字化转型的浪潮。医保购药APP作为医保体系数字化的一部分&#xff0c;其技术架构和设计思路至关重要。接下来&#xff0c;小编将为您讲解医保购药APP的技术架构与设计思路&#xff0c;为相关从业者提供参考和启发。 一、…
阅读更多...
蓝桥杯第642题——跳蚱蜢

蓝桥杯第642题——跳蚱蜢

题目描述 如下图所示&#xff1a; 有 9 只盘子&#xff0c;排成 1 个圆圈。 其中 8 只盘子内装着 8 只蚱蜢&#xff0c;有一个是空盘。 我们把这些蚱蜢顺时针编号为 1 ~ 8。 每只蚱蜢都可以跳到相邻的空盘中&#xff0c; 也可以再用点力&#xff0c;越过一个相邻的蚱蜢跳到空盘…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023