ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【前端Vue】day04 [打印本页]

---

作者: 守听    时间: 2025-1-2 04:18
标题: 【前端Vue】day04
一、学习目标

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

​ scoped办理样式冲突/data是一个函数
2.组件通讯

• 组件通讯语法
  
• 父传子
  
• 子传父
  
• 非父子通讯（扩展）
  

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

• 拆分组件
  
• 列表渲染
  
• 数据添加
  
• 数据删除
  
• 列表统计
  
• 清空
  
• 长期化
  

4.进阶语法

• v-model原理
  
• v-model应用于组件
  
• sync修饰符
  
• ref和$refs
  
• $nextTick
  

二、scoped办理样式冲突

1.默认情况：

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

• 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
  
• 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件
  

2.代码演示

BaseOne.vue

1. <template>
2.   <div class="base-one">
3.     BaseOne
4.   </div>
5. </template>
7. <script>
8. export default {
10. }
11. </script>
12. <style scoped>
13. </style>

复制代码

BaseTwo.vue

1. <template>
2.   <div class="base-one">
3.     BaseTwo
4.   </div>
5. </template>
7. <script>
8. export default {
10. }
11. </script>
13. <style scoped>
14. </style>

复制代码

App.vue

1. <template>
2.   <div id="app">
3.     <BaseOne></BaseOne>
4.     <BaseTwo></BaseTwo>
5.   </div>
6. </template>
8. <script>
9. import BaseOne from './components/BaseOne'
10. import BaseTwo from './components/BaseTwo'
11. export default {
12.   name: 'App',
13.   components: {
14.     BaseOne,
15.     BaseTwo
16.   }
17. }
18. </script>

复制代码

3.scoped原理

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

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

4.总结

• style的默认样式是作用到那里的？
  
• scoped的作用是什么？
  
• style中推不保举加scoped？
  

三、data必须是一个函数

1、data为什么要写成函数

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

2.代码演示

BaseCount.vue

1. <template>
2.   <div class="base-count">
3.     <button @click="count--">-</button>
4.     <span>{{ count }}</span>
5.     <button @click="count++">+</button>
6.   </div>
7. </template>
9. <script>
10. export default {
11.   data: function () {
12.     return {
13.       count: 100,
14.     }
15.   },
16. }
17. </script>
19. <style>
20. .base-count {
21.   margin: 20px;
22. }
23. </style>

复制代码

App.vue

1. <template>
2.   <div class="app">
3.     <BaseCount></BaseCount>
4.   </div>
5. </template>
7. <script>
8. import BaseCount from './components/BaseCount'
9. export default {
10.   components: {
11.     BaseCount,
12.   },
13. }
14. </script>
16. <style>
17. </style>

复制代码

3.总结

data写成函数的目标是什么？
四、组件通讯

1.什么是组件通讯？

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

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

2.组件之间如何通讯

思考：

• 组件之间有哪些关系？
  
• 对应的组件通讯方案有哪几类？
  

3.组件关系分类

• 父子关系
  
• 非父子关系
  

4.通讯办理方案

5.父子通讯流程

• 父组件通过 props 将数据传递给子组件
  
• 子组件使用 $emit 通知父组件修改更新
  

6.父向子通讯代码示例

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

1. <template>
2.   <div class="app" style="border: 3px solid #000; margin: 10px">
3.     我是APP组件
4.     <Son></Son>
5.   </div>
6. </template>
8. <script>
9. import Son from './components/Son.vue'
10. export default {
11.   name: 'App',
12.   data() {
13.     return {
14.       myTitle: '学前端，就来黑马程序员',
15.     }
16.   },
17.   components: {
18.     Son,
19.   },
20. }
21. </script>
23. <style>
24. </style>

复制代码

子组件Son.vue

1. <template>
2.   <div class="son" style="border:3px solid #000;margin:10px">
3.     我是Son组件
4.   </div>
5. </template>
7. <script>
8. export default {
9.   name: 'Son-Child',
10. }
11. </script>
13. <style>
15. </style>

复制代码

父向子传值步骤

• 给子组件以添加属性的方式传值
  
• 子组件内部通过props接收
  
• 模板中直接使用 props接收的值
  

7.子向父通讯代码示例

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

子向父传值步骤

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

8.总结

• 组件关系分类有哪两种
  
• 父子组件通讯的流程是什么？
  
  
  • 父向子
    
  • 子向父
    
  
  

五、什么是props

1.Props 定义

组件上 注册的一些 自定义属性
2.Props 作用

向子组件传递数据
3.特点

• 可以 传递 恣意数量 的prop
  
• 可以 传递 恣意类型 的prop
  

4.代码演示

父组件App.vue

1. <template>
2.   <div class="app">
3.     <UserInfo
4.       :username="username"
5.       :age="age"
6.       :isSingle="isSingle"
7.       :car="car"
8.       :hobby="hobby"
9.     ></UserInfo>
10.   </div>
11. </template>
13. <script>
14. import UserInfo from './components/UserInfo.vue'
15. export default {
16.   data() {
17.     return {
18.       username: '小帅',
19.       age: 28,
20.       isSingle: true,
21.       car: {
22.         brand: '宝马',
23.       },
24.       hobby: ['篮球', '足球', '羽毛球'],
25.     }
26.   },
27.   components: {
28.     UserInfo,
29.   },
30. }
31. </script>
33. <style>
34. </style>

复制代码

子组件UserInfo.vue

1. <template>
2.   <div class="userinfo">
3.     <h3>我是个人信息组件</h3>
4.     <div>姓名：</div>
5.     <div>年龄：</div>
6.     <div>是否单身：</div>
7.     <div>座驾：</div>
8.     <div>兴趣爱好：</div>
9.   </div>
10. </template>
12. <script>
13. export default {
14.   
15. }
16. </script>
18. <style>
19. .userinfo {
20.   width: 300px;
21.   border: 3px solid #000;
22.   padding: 20px;
23. }
24. .userinfo > div {
25.   margin: 20px 10px;
26. }
27. </style>

复制代码

六、props校验

1.思考

组件的props可以乱传吗
2.作用

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

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

4.代码演示

App.vue

1. <template>
2.   <div class="app">
3.     <BaseProgress :w="width"></BaseProgress>
4.   </div>
5. </template>
7. <script>
8. import BaseProgress from './components/BaseProgress.vue'
9. export default {
10.   data() {
11.     return {
12.       width: 30,
13.     }
14.   },
15.   components: {
16.     BaseProgress,
17.   },
18. }
19. </script>
21. <style>
22. </style>

复制代码

BaseProgress.vue

1. <template>
2.   <div class="base-progress">
3.     <div class="inner" :style="{ width: w + '%' }">
4.       <span>{{ w }}%</span>
5.     </div>
6.   </div>
7. </template>
9. <script>
10. export default {
11.   props: ['w'],
12. }
13. </script>
15. <style scoped>
16. .base-progress {
17.   height: 26px;
18.   width: 400px;
19.   border-radius: 15px;
20.   background-color: #272425;
21.   border: 3px solid #272425;
22.   box-sizing: border-box;
23.   margin-bottom: 30px;
24. }
25. .inner {
26.   position: relative;
27.   background: #379bff;
28.   border-radius: 15px;
29.   height: 25px;
30.   box-sizing: border-box;
31.   left: -3px;
32.   top: -2px;
33. }
34. .inner span {
35.   position: absolute;
36.   right: 0;
37.   top: 26px;
38. }
39. </style>

复制代码

七、props校验完整写法

1.语法

1. props: {
2.   校验的属性名: {
3.     type: 类型,  // Number String Boolean ...
4.     required: true, // 是否必填
5.     default: 默认值, // 默认值
6.     validator (value) {
7.       // 自定义校验逻辑
8.       return 是否通过校验
9.     }
10.   }
11. },

复制代码

2.代码实例

1. <script>
2. export default {
3.   // 完整写法（类型、默认值、非空、自定义校验）
4.   props: {
5.     w: {
6.       type: Number,
7.       //required: true,
8.       default: 0,
9.       validator(val) {
10.         // console.log(val)
11.         if (val >= 100 || val <= 0) {
12.           console.error('传入的范围必须是0-100之间')
13.           return false
14.         } else {
15.           return true
16.         }
17.       },
18.     },
19.   },
20. }
21. </script>

复制代码

3.注意

1.default和required一般差别时写（因为当时必填项时，肯定是有值的）
2.default后面如果是简朴类型的值，可以直接写默认。如果是复杂类型的值，则须要以函数的形式return一个默认值
八、props&data、单向数据流

1.共同点

都可以给组件提供数据
2.区别

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

3.单向数据流：

父级props 的数据更新，会向卑鄙动，影响子组件。这个数据活动是单向的
4.代码演示

App.vue

1. <template>
2.   <div class="app">
3.     <BaseCount></BaseCount>
4.   </div>
5. </template>
7. <script>
8. import BaseCount from './components/BaseCount.vue'
9. export default {
10.   components:{
11.     BaseCount
12.   },
13.   data(){
14.   },
15. }
16. </script>
18. <style>
20. </style>

复制代码

BaseCount.vue

1. <template>
2.   <div class="base-count">
3.     <button @click="count--">-</button>
4.     <span>{{ count }}</span>
5.     <button @click="count++">+</button>
6.   </div>
7. </template>
9. <script>
10. export default {
11.   // 1.自己的数据随便修改  （谁的数据 谁负责）
12.    data () {
13.      return {
14.        count: 100,
15.      }
16.    },
17.   // 2.外部传过来的数据 不能随便修改
18.   //props: {
19.   //  count: {
20.   //    type: Number,
21.   //  },
22.   //}
23. }
24. </script>
26. <style>
27. .base-count {
28.   margin: 20px;
29. }
30. </style>

复制代码

5.口诀

谁的数据谁负责
九、综合案例-组件拆分

1.需求说明

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

2.拆分基础组件

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

十、综合案例-列表渲染

思绪分析：

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

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

思绪分析：

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

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

思绪分析：

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

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

思绪分析：

• 底部合计：父组件传递list到底部组件 —>展示合计
  
• 清空功能：监听变乱 —> 子组件通知父组件 —>父组件清空
  
• 长期化存储：watch监听数据变化，长期化到本地
  

十四、非父子通讯-event bus 变乱总线

1.作用

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

• 创建一个都能访问的变乱总线 （空Vue实例）
  
  1. import Vue from 'vue'
  2. const Bus = new Vue()
  3. export default Bus

  复制代码
• A组件（接受方），监听Bus的 $on变乱
  
  1. created () {
  2.   Bus.$on('sendMsg', (msg) => {
  3.     this.msg = msg
  4.   })
  5. }

  复制代码
• B组件（发送方），触发Bus的$emit变乱
  
  1. Bus.$emit('sendMsg', '这是一个消息')

  复制代码
  
  
  

3.代码示例

EventBus.js

1. import Vue from 'vue'
2. const Bus  =  new Vue()
3. export default Bus

复制代码

BaseA.vue(接受方)

1. <template>
2.   <div class="base-a">
3.     我是A组件（接收方）
4.     <p>{{msg}}</p>  
5.   </div>
6. </template>
8. <script>
9. import Bus from '../utils/EventBus'
10. export default {
11.   data() {
12.     return {
13.       msg: '',
14.     }
15.   },
16. }
17. </script>
19. <style scoped>
20. .base-a {
21.   width: 200px;
22.   height: 200px;
23.   border: 3px solid #000;
24.   border-radius: 3px;
25.   margin: 10px;
26. }
27. </style>

复制代码

BaseB.vue(发送方)

1. <template>
2.   <div class="base-b">
3.     <div>我是B组件（发布方）</div>
4.     <button>发送消息</button>
5.   </div>
6. </template>
8. <script>
9. import Bus from '../utils/EventBus'
10. export default {
11. }
12. </script>
14. <style scoped>
15. .base-b {
16.   width: 200px;
17.   height: 200px;
18.   border: 3px solid #000;
19.   border-radius: 3px;
20.   margin: 10px;
21. }
22. </style>

复制代码

App.vue

1. <template>
2.   <div class="app">
3.     <BaseA></BaseA>
4.     <BaseB></BaseB>
5.   </div>
6. </template>
8. <script>
9. import BaseA from './components/BaseA.vue'
10. import BaseB from './components/BaseB.vue'
11. export default {
12.   components:{
13.     BaseA,
14.     BaseB
15.   }
16. }
17. </script>
19. <style>
21. </style>

复制代码

4.总结

1.非父子组件传值借助什么？
2.什么是变乱总线
3.发送方应该调用变乱总线的哪个方法
4.接收方应该调用变乱总线的哪个方法
5.一个组件发送数据，可不可以被多个组件接收
十五、非父子通讯-provide&inject

1.作用

跨层级共享数据
2.场景

3.语法

• 父组件 provide提供数据
  

1. export default {
2.   provide () {
3.     return {
4.        // 普通类型【非响应式】
5.        color: this.color,
6.        // 复杂类型【响应式】
7.        userInfo: this.userInfo,
8.     }
9.   }
10. }

复制代码

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

1. export default {
2.   inject: ['color','userInfo'],
3.   created () {
4.     console.log(this.color, this.userInfo)
5.   }
6. }

复制代码

4.注意

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

十六、v-model原理

1.原理：

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

1. <template>
2.   <div id="app" >
3.     <input v-model="msg" type="text">
5.     <input :value="msg" @input="msg = $event.target.value" type="text">
6.   </div>
7. </template>

复制代码

2.作用：

提供数据的双向绑定

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

3.注意

$event 用于在模板中，获取变乱的形参
4.代码示例

1. <template>
2.   <div class="app">
3.     <input type="text"  />
4.     <br />
5.     <input type="text" />
6.   </div>
7. </template>
9. <script>
10. export default {
11.   data() {
12.     return {
13.       msg1: '',
14.       msg2: '',
15.     }
16.   },
17. }
18. </script>
19. <style>
20. </style>

复制代码

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

差别的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model
底层处理的是 checked属性和change变乱。
不过咱们只须要掌握应用在文本框上的原理即可
十七、表单类组件封装

1.需求目标

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

App.vue

1. <template>
2.   <div class="app">
3.     <BaseSelect></BaseSelect>
4.   </div>
5. </template>
7. <script>
8. import BaseSelect from './components/BaseSelect.vue'
9. export default {
10.   data() {
11.     return {
12.       selectId: '102',
13.     }
14.   },
15.   components: {
16.     BaseSelect,
17.   },
18. }
19. </script>
21. <style>
22. </style>

复制代码

BaseSelect.vue

1. <template>
2.   <div>
3.     <select>
4.       <option value="101">北京</option>
5.       <option value="102">上海</option>
6.       <option value="103">武汉</option>
7.       <option value="104">广州</option>
8.       <option value="105">深圳</option>
9.     </select>
10.   </div>
11. </template>
13. <script>
14. export default {
15. }
16. </script>
18. <style>
19. </style>

复制代码

十八、v-model简化代码

1.目标：

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

v-model其实就是 :value和@input变乱的简写

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

3.代码示例

子组件

1. <select :value="value" @change="handleChange">...</select>
2. props: {
3.   value: String
4. },
5. methods: {
6.   handleChange (e) {
7.     this.$emit('input', e.target.value)
8.   }
9. }

复制代码

父组件

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

复制代码

十九、.sync修饰符

1.作用

可以实现 子组件 与 父组件数据 的 双向绑定，简化代码
简朴明白：子组件可以修改父组件传过来的props值
2.场景

封装弹框类的基础组件， visible属性 true体现 false隐蔽
3.本质

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

父组件

1. //.sync写法
2. <BaseDialog :visible.sync="isShow" />
3. --------------------------------------
4. //完整写法
5. <BaseDialog
6.   :visible="isShow"
7.   @update:visible="isShow = $event"
8. />

复制代码

子组件

1. props: {
2.   visible: Boolean
3. },
5. this.$emit('update:visible', false)

复制代码

5.代码示例

App.vue

1. <template>
2.   <div class="app">
3.     <button @click="openDialog">退出按钮</button>
4.     <BaseDialog :isShow="isShow"></BaseDialog>
5.   </div>
6. </template>
8. <script>
9. import BaseDialog from './components/BaseDialog.vue'
10. export default {
11.   data() {
12.     return {
13.       isShow: false,
14.     }
15.   },
16.   components: {
17.     BaseDialog,
18.   },
19. }
20. </script>
22. <style>
23. </style>

复制代码

BaseDialog.vue

1. <template>
2.   <div class="base-dialog-wrap" v-show="isShow">
3.     <div class="base-dialog">
4.       <div class="title">
5.         <h3>温馨提示：</h3>
6.         <button class="close">x</button>
7.       </div>
8.       <div class="content">
9.         <p>你确认要退出本系统么？</p>
10.       </div>
11.       <div class="footer">
12.         <button>确认</button>
13.         <button>取消</button>
14.       </div>
15.     </div>
16.   </div>
17. </template>
19. <script>
20. export default {
21.   props: {
22.     isShow: Boolean,
23.   }
24. }
25. </script>
27. <style scoped>
28. .base-dialog-wrap {
29.   width: 300px;
30.   height: 200px;
31.   box-shadow: 2px 2px 2px 2px #ccc;
32.   position: fixed;
33.   left: 50%;
34.   top: 50%;
35.   transform: translate(-50%, -50%);
36.   padding: 0 10px;
37. }
38. .base-dialog .title {
39.   display: flex;
40.   justify-content: space-between;
41.   align-items: center;
42.   border-bottom: 2px solid #000;
43. }
44. .base-dialog .content {
45.   margin-top: 38px;
46. }
47. .base-dialog .title .close {
48.   width: 20px;
49.   height: 20px;
50.   cursor: pointer;
51.   line-height: 10px;
52. }
53. .footer {
54.   display: flex;
55.   justify-content: flex-end;
56.   margin-top: 26px;
57. }
58. .footer button {
59.   width: 80px;
60.   height: 40px;
61. }
62. .footer button:nth-child(1) {
63.   margin-right: 10px;
64.   cursor: pointer;
65. }
66. </style>

复制代码

6.总结

1.父组件如果想让子组件修改传已往的值 必须加什么修饰符？
2.子组件要修改父组件的props值 必须使用什么语法？
二十、ref和$refs

1.作用

使用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例
2.特点：

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

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

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

复制代码

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

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

复制代码

4.注意

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

App.vue

1. <template>
2.   <div class="app">
3.     <BaseChart></BaseChart>
4.   </div>
5. </template>
7. <script>
8. import BaseChart from './components/BaseChart.vue'
9. export default {
10.   components:{
11.     BaseChart
12.   }
13. }
14. </script>
16. <style>
17. </style>

复制代码

BaseChart.vue

1. <template>
2.   <div class="base-chart-box" ref="baseChartBox">子组件</div>
3. </template>
5. <script>
6. // yarn add echarts 或者 npm i echarts
7. import * as echarts from 'echarts'
9. export default {
10.   mounted() {
11.     // 基于准备好的dom，初始化echarts实例
12.     var myChart = echarts.init(document.querySelect('.base-chart-box'))
13.     // 绘制图表
14.     myChart.setOption({
15.       title: {
16.         text: 'ECharts 入门示例',
17.       },
18.       tooltip: {},
19.       xAxis: {
20.         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
21.       },
22.       yAxis: {},
23.       series: [
24.         {
25.           name: '销量',
26.           type: 'bar',
27.           data: [5, 20, 36, 10, 10, 20],
28.         },
29.       ],
30.     })
31.   },
32. }
33. </script>
35. <style scoped>
36. .base-chart-box {
37.   width: 400px;
38.   height: 300px;
39.   border: 3px solid #000;
40.   border-radius: 6px;
41. }
42. </style>

复制代码

二十一、异步更新 & $nextTick

1.需求

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

• 点击编辑，体现编辑框
  
• 让编辑框，立刻获取焦点
  

2.代码实现

1. <template>
2.   <div class="app">
3.     <div v-if="isShowEdit">
4.       <input type="text" v-model="editValue" ref="inp" />
5.       <button>确认</button>
6.     </div>
7.     <div v-else>
8.       <span>{{ title }}</span>
9.       <button @click="editFn">编辑</button>
10.     </div>
11.   </div>
12. </template>
14. <script>
15. export default {
16.   data() {
17.     return {
18.       title: '大标题',
19.       isShowEdit: false,
20.       editValue: '',
21.     }
22.   },
23.   methods: {
24.     editFn() {
25.         // 显示输入框
26.         this.isShowEdit = true  
27.         // 获取焦点
28.         this.$refs.inp.focus()
29.     }  },
30. }
31. </script>

复制代码

3.问题

“体现之后”，立刻获取焦点是不能成功的！
缘故原由：Vue 是异步更新DOM (提升性能)
4.办理方案

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

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

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4