前端面试题总结最新之vue篇

1. 说 说 说什么是 什么是 MVVM?

这 MVVM 是 Model-View-ViewModel 的缩写。 MVVM 是一种设计思想。 Model 层代表数据模型，也可以在
Model 中定义数据修改和操作的业务逻辑； View 代表 UI 组件，它负责将数据模型转 化成 UI 展现出来， View
是一个同步 View 和 Model 的对象在 MVVM 架构下， View 和 Model 之间并没有直接的联系，而是通过
ViewModel 进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model
中，而 Model 数据的变化也会立即反应到 View 上。 对 ViewModel 通过双向数据绑定把 View 层和 Model
层连接了起来，而 View 和 Model 之间的 同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作
DOM , 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

2. 说 说 mvvm 和 和 mvc 区别？它和其它框架（jquery）的区别是什么 ）的区别是什么?

mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的
ViewModel 。 mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速 度变慢，影响用户体验。
区别：vue 数据驱动，通过数据来显示视图层而不是节点操作。 场景：数据操作比较多的场景，更加便捷。

3.Vue的响应式原理

Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响
Vue中编写了一个wather来处理数据，在使用getter方法时，总会通知wather实例对view层渲染页面，同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新

4.Vue的生命周期

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂
载 Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

创建前/后： 在 beforeCreate 阶段， vue 实例的挂载元素 el 和数据对象 data 都为
undefined ，还未初始化。在 created 阶段， vue 实例的数据对象 data 有了，el 还没有。

载入前/后：在 beforeMount 阶段， vue 实例的 $el 和 data 都初始化了，但还是挂载之前为
虚拟的 dom 节点， data.message 还未替换。在 mounted 阶段， vue 实例挂载完成，data.message 成功渲染

更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法

属销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在

1.beforeCreate --创建前

触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在此阶段可以做的事情：加loading事件

2.created --创建后

触发的行为：vue实例的数据对象data有了，$el还没有
在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备

3.beforeMount --渲染前

触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换
在此阶段可以做的事情：。。。

4.mounted --渲染后

触发的行为：vue实例挂载完成，data.filter成功渲染
在此阶段可以做的事情：配合路由钩子使用

5.beforeUpdate --更新前

触发的行为：data更新时触发
在此阶段可以做的事情：。。。

6.updated —更新后

触发的行为：data更新时触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）

7.beforeDestroy —销毁前

触发的行为：组件销毁时触发
在此阶段可以做的事情：可向用户询问是否销毁

8.destroyed —销毁后

触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
在此阶段可以做的事情：组件销毁时进行提示

5.请详细说下你对vue生命周期的理解？

答：总共分为8个阶段：创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

6.vue生命周期在真实场景下的业务应用

created： 进行ajax请求异步数据的获取、初始化数据
mounted： 挂载元素内dom节点的获取
nextTick： 针对单一事件更新数据后立即操作dom
updated： 任何数据的更新，如果要做统一的业务逻辑处理
watch： 监听具体数据变化，并做相应的处理

7. vue 的优点,缺点是什么

低耦合。
视图（ View ）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"
View "上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。

可重用性。
你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。独立开发。开发人员可以专注于业务逻辑和数据的开发（ ViewModel ），设计人员可以专注于页面设计。

可测试。
界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

vue核心是一个响应的数据绑定系统，mvvm，数据驱动，组件化，轻量，简洁，高效，快速，模块好。

缺点：不支持低版本浏览器，最低到IE9，不利于SEO的优化，首页加载时间较长，不可以使用浏览器的导航按钮需要自行实现前进后退。
8.为什么说 vue 是一个渐进式框架?

原首先我们需要理解什么是框架。在最初的前端开发中，为了完成一些功能，我们需要通过原生 js 获取 html 中的 DOM 节点，随后插入内容或添加事件，进行一系列操作。但是，一般需求的业务逻辑都是比较复杂的，这对原生 js 处理起来就很吃力，代码的可维护性也就随时间慢慢降低。这个时候我们需要把视图( View )、数据( Model )、逻辑控制( VM )分离。这就是 MVVM 模式的雏形。
在核心库的基础上，vue 现在已经有了一套完整的生态系统，我们可以添加 Vuex，可以添加 vue-router,可以添加任何你想添加的第三方库，这些都是互相独立的。可以说 vue 是轻量型的，是渐进型的
Vue 与 React、Angular 的不同是，但它是渐进的：
你可以在原有大系统的上面，把一两个组件改用它实现，当 jQuery 用
也可以整个用它全家桶开发，当 Angular 用
可以用它的视图，搭配你自己设计的整个下层用
可以在底层数据逻辑的地方用 OO 和设计模式的那套理念
也可以函数式，都可以，它只是个轻量视图而已，只做了最核心的东西

9.Vue中双向数据绑定是如何实现的？

Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被解除过后的数据会有两个属性：一个叫getter，一个叫setter。
getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher监听，通知dom修改刷新。

10.vue 父组件如何向子组件中传递数据?

组件传给子组件：子组件通过 props 方法接受数据
子组件传给父组件： $emit 方法传递参数
计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项
目比较小时，用这个比较合适（虽然也有不少人推荐直接用 VUEX，具体来说看需求）

11.vue 兄弟组件之间如何传值？

可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发e m i t 和 监 听 emit和监听emit和监听on来实现组件之间的通信和参数传递，类似window的全局自定义事件。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this)

12.第一次加载页面会触发哪几个钩子

第一次加载会触发 beforeCreate、created、beforeMount、mounted四个钩子

13.router是什么？

1.router：this.$router 是路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、跳转到新的 URL 地址

2.routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象

3.route：this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它

14.请问 v-if 和 和 v-show 有什么区别?

共同点：都是动态显示 DOM 元素
区别点：
手段
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
v-show 是通过设置 DOM 元素的 display 样式属性控制显隐编译过程
v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
v-show 只是简单的基于 css 切换

编译条件

v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开
始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载)态的
v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留性能消耗
v-if 有更高的切换消耗 v-show 有更高的初始渲染消耗

使用场景

v-if 适合运营条件不大可能改变
v-show 适合频繁切换

v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;
v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

15. vue 常用的修饰符?

v-model 修饰符：
 .lazy： 输入框改变，这个数据就会改变，这个修饰符会在光标离开 input 框才会更新数据

 <input type="text" v-model.lazy="value">

 .number： 营先输入数字就会限制输入只能是数字，先字符串就相当于没有加 number，注
意，不是输入框不能输入字符串，是这个数据是数字

 <input type="text" v-model.number="value">

 .trim： 输入框过滤首尾的空格

 <input type="text" v-model.trim="value">

 事件修饰符：
 .stop： 阻止事件冒泡，相当于调用了 event.stopPropagation()方法

 <button @click.stop="test"></button>

 .prevent： 阻止默认行为，相当于调用了 event.preventDefault()方法，比如表单的提交、
a 标签的跳转就是默认事件

 <a href="" @click.prevent="test"></a>

 .self： 只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个 div
里面有个按钮，div 和按钮都有事件，我们点击按钮，div 绑定的方法也会触发，如果 div
的 click 加上 self，只有点击到 div 的时候才会触发，变相的算是阻止冒泡

 <div @click.stop="test"></div>

 .once： 事件只能用一次，无论点击几次，执行一次之后都不会再执行

 <div @click.once="test"></div>
 
 .capture： 事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡
 .sync： 对 prop 进行双向绑定
 .keyCode： 监听按键的指令，具体可以查看 vue 的键码对应表

vue常用的5个事件修饰符
.stop: 阻止事件冒泡；
.prevent: 阻止默认事件；
.capture: 实现捕获触发事件的机制 ;
.self: 实现只有点击当前元素时候，才会触发事件处理函数 ;
.once: 事件只触发一次；

16.v-on 可以监听多个方法吗?

关于 v-on 监听多个方法的简写：

 <input type="text" v-on="{ input:onInput, focus:onFocus, blur:onBlur,}" />

 v-on 在 vue2.x 中测试,以下两种均可
 <button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来 1</button>
 <button @mouseenter="onEnter" @mouseleave="onLeave">鼠标进来 2</button>

  一个事件绑定多个函数，按顺序执行，这里分隔函数可以用逗号也可以用分号
 <button @click="a(),b()">点我 ab</button>
 <button @click="one()">点我 onetwothree</button>

 - v-on 修饰符 .stop .prevent .capture .self 以及指定按键.{keyCode|keyAlias} 
这里的.stop 和 .prevent 也可以通过传入&event 进行操作 
全部按键别名有：enter tab delete esc space up down left right 
 <form @keyup.delete="onKeyup" @submit.prevent="onSubmit">
 <input type="text" placeholder="在这里按 delete">
 <button type="submit">点我提交</button>

17.vue 事件中如何使用 event 对象?

获取事件对象，方法参数传递 $event 。注意在事件中要使用 $ 符号

button @click=“Event($event)”>事件对象</button

18.$nextTick 的使用?

this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它然后等待DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上this.$nextTick() 在页面交互，尤其是从后台获取数据后重新生成 DOM 对象之后的操作有很大的优势

使用：
mounted() {
  this.$nextTick( ()=>{
   需要执行的方法
 })
}

19.Vue组件通信的六种方法

1.父组件向子组件传值： props/$emit
2.子组件向父组件传值（通过事件形式） $ emit/$on3.vuex4.$ attrs/$ listeners
$ attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$ attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
$ listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners"传入内部组件5.provide/inject6.$parent / $children与 ref
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例

20.vue 的路由实现 Hash 模式和 History 模式?

hash 模式：在浏览器中符号 “#” ，#以及#后面的字符称之为 hash ，用window.location.hash 读取。特点： hash 虽然在 URL 中，但不被包括在 HTTP 请求中；用来指导浏览器动作，对服务端安全无用， hash 不会重加载页面

history 式： history 采用 HTML5 的新特性；且提供了两个新方法： pushState() ，
replaceState() 可以对浏览器历史记录栈进行修改，以及 popState 事件的监听到状态变更

21.vue-router 如何响应路由参数的变化?

当使用路由参数时，例如从 /user/foo 导航到 /user/bar ，原来的组件实例会被复用。因为
两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件
的生命周期钩子不会再被调用。

 监测路由参数变化的方法
 watch 监听：
 watch: { // watch 的第一种写法
 $route (to, from) {
 console.log(to)
 console.log(from)
 }
 },
 // ====
 watch: { // watch 的第二种写法
 $route: {
 handler (to, from){
 console.log(to)
 console.log(from)
 },
 // 深度观察监听
 deep: true
 }
 }

导航守卫

 beforeRouteEnter (to, from, next) {
 console.log('beforeRouteEnter 被调用：在渲染该组件的对应路由被 confirm 前调用')
 // 在渲染该组件的对应路由被 confirm 前调用
 // 不！能！获取组件实例 `this` 因为当守卫执行前，组件实例还没被创建
 // 可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实
例作为回调方法的参数。
 next(vm => {
 // 通过 `vm` 访问组件实例
 console.log(vm)
 })
 },
 // beforeRouteEnter 是支持给 next 传递回调的唯一守卫。
 // 对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回
调，因为没有必要了。
 beforeRouteUpdate (to, from, next) {
 // 在当前路由改变，但是该组件被复用时调用
 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时
候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调
用。
 // 可以访问组件实例 `this`
 console.log('beforeRouteUpdate 被调用：在当前路由改变，但是该组件被复用时调用')
 next()
 },
 beforeRouteLeave (to, from, next) {
 // 导航离开该组件的对应路由时调用
 // 可以访问组件实例 `this`
 const answer = window.confirm('是否确认离开当前页面')
 if (answer) {
 console.log('beforeRouteLeave 被调用：导航离开该组件的对应路由时调用')
 next()
 } else {
 next(false)
 }
 },

22.vue-router 有哪几种导航钩子？

第一种：全局导航钩子
第二种：单独路由独享钩子
第三种：组件内的钩子

23.created 和 和 mounted 的区别?

created: 在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted: 在模板渲染成 html 后调用，通常是初始化页面完成后，再对 html 的 dom 节点进行一些需要的操作。

24.$route和$router 的区别?

router 是 VueRouter 的实例，在 script 标签中想要导航到不同的 URL,使用$router.push方法。返回上一个历史history用$router.to(-1)

$route 当前 route 跳转对象。里面可以获取当前路由的 name,path,query,parmas 等。

25.vuex 是什么？怎么使用？哪种功能场景使用它?

只用来读取的状态集中放在 store 中； 改变状态的方式是提交 mutations ，这是个同步的事
物；异步逻辑应该封装在 action 中。
在 main.js 引入 store ，注入。新建了一个目录 store ， … export
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

26. vuex 有哪几种属性?

分别是 State、 Getter、Mutation 、Action、 Module
state ：Vuex 使用单一状态树,即每个应用将仅仅包含一个 store 实例，但单一状态树和模
块化并不冲突。存放的数据状态，不可以直接修改里面的数据
mutations ： mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据
getters ：类似 vue 的计算属性，主要用来过滤一些数据
action ： actions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据
的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action
Module ：项目特别复杂的时候，可以让每一个模块拥有自己的 state、mutation、action、
getters，使得结构非常清晰，方便管理

27.vuex 的核心概念和使用方法?

state ：数据源，载体
 getters ：用于改变 state 的值，派生出多个数据源
 mutation ：唯一可以提交可以改变 state 的状态，也就是数据的属性值
 actions ：提交的是 mutation,用 commit 提交 而不是直接变更状态，可以包含任意异步出
操作
 modules ：拆分成多个模块
 // vuex 核心概念
 // state
 // 通过计算属性改变值
 computed:{
 count(){
 //定义语法
 return this.$store.state.count
 }
 }
 // 通过 getters 可以派生出一些新的状态
 const store =new Vuex.Store({
 state:{
 todos:[
 {id:1,text;'...',done:true}
 ]
 },
 //通过此方法对 todos 数据源进行过滤，拿到新的数据源赋值给 doneTodos
 getters:{
 doneTodos:state=>{
 return state.todos.filter(tod0=>todo.done)
 }
 },
 })
 // mutations
 // 更改 Vuex 的 store 中的状态的唯一方法，也只能通过 mutations 去改变值
 const store=new Vux.Store({
 state:{
 count:1
 },
 mutations:{
 //随便自定义一个函数，参数是默认 state
 add(state){
 //通过 state.count 拿到 count 属性值在进行自增
 state.count++
 }
 }，
 actions:{
 add(context){
 //通过 commit 的方法提交一个 add,这时就会调用 mutation 中的 add 方法就会加加 1
 context.commit("add")
 }
 }
 })

28.Vuex是什么？

Vuex是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统
vuex:是vue提供的状态管理工具，简单解释就是vue各个组件直接的变量是不能直接共享的，组件直接的参数传递才多层的时候变得异常复杂，所以就诞生了vuex的状态管理工具，保证了状态的统一和可追踪
①：这个状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
②：使用vuex管理数据的好处：
能够在vuex中集中管理共享的数据，便于开发和后期进行维护
能够高效的实现组件之间的数据共享，提高开发效率
存储在vuex中的数据是响应式的，当数据放生改变时，页面中的数据会同步更新
③：vuex中的数据和data中的数据与什么区别？
vuex中的数据是全局的，共享的，data中的数据是私有的
vuex中的数据是响应式的，只要vuex中的数据发生改变，引用vuex中的数据的文件会同步更新
vuex中的数据是单向的，想要修改vuex中的数据必须在mutation中修改

29 vue插槽

我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。

父组件

<template>
  <section>
          <h2>定制内容</h2> 
          <Chca>
             <p>能否显示</p>
          </Chca>
  </section>
    
</template>
<script>
import Chca from '../iview/chaca'
export default {
     components: {
    Chca
   },
}
</script>
<style scoped>

</style>

子组件

<template>
    <div>
         我是子组件
    </div>
</template>
<script>

export default {
    name:'chaca',
    
}
</script>
<style scoped>

</style>

目前在父组件中的p标签是没有显示出来，想要父组件中的p标签也显示出来的话我们需要更改下子组件的代码

<template>
    <div>
        <div>我是子组件</div> 
        <slot></slot>
    </div>
</template>
<script>

export default {
    name:'chaca',
    
}
</script>
<style scoped>

</style>

结合上面的例子来理解就是这样的：

1.父组件在引用子组件时希望向子组价传递模板内容<p>测试一下吧内容写在这里了能否显示</p>

2.子组件让父组件传过来的模板内容在所在的位置显示

3.子组件中的<slot>就是一个槽，可以接收父组件传过来的模板内容，<slot> 元素自身将被替换

4.<Chca></Chca>组件没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

2.具名插槽

父组件

<template>
  <section>
          <h2>定制内容</h2> 
          <Chca>
            <p>能否显示</p>
            <template v-slot:header>
              <h1>具名插槽</h1>
            </template>
          </Chca>
  </section>
    
</template>
<script>
import Chca from '../iview/chaca'
export default {
     components: {
    Chca
   },
}
</script>
<style scoped>

</style>

子组件

<template>
    <div>
        <div>我是子组件</div> 
        <slot></slot>
        <slot name="header"></slot>
    </div>
</template>
<script>

export default {
    name:'chaca',
    
}
</script>
<style scoped>

</style>

作用域插槽

子组件

<template>
    <div>
        <!-- <div>我是子组件</div> 
        <slot></slot>
        <slot name="header"></slot> -->

        <!-- 作用域 -->
        <span>
            <!-- 为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去： -->
         <slot v-bind:user="user">
             {{user.firs}}
         </slot>
        </span>
    </div>
</template>
<script>

export default {
    name:'chaca',
    data(){
        return{
            user:{
                firs:'作用域插槽'
            }
        }
    }
}
</script>
<style scoped>

</style>

父组件

<template>
  <section>
          <h2>定制内容</h2> 
          <Chca>
            <p>能否显示</p>
            <template v-slot:header>
              <h1>具名插槽</h1>
            </template>
           <!-- 作用域插槽: 绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字 -->
              <template v-slot="slotshow">
                {{ slotshow.user.firs }}
              </template>
          </Chca>
  </section>
    
</template>
<script>
import Chca from '../iview/chaca'
export default {
     components: {
    Chca
   },
}
</script>
<style scoped>

</style>