每天分享几个面试题(三)

每天分享几个面试题(一)

每天分享几个面试题(二)

每天分享几个面试题(四)

每天分享几个面试题(五)

每天分享几个面试题(六)

每天分享几个面试题(七)

每天分享几个面试题(八)

每天分享几个面试题(九)

1. 谈一谈对slot的理解, 以及slot的应用场景有哪些?

        简单的来说slot就是插槽的意思, 我们会在一个组件中定义一个<slot></slot>; 当该组件被使用的时候, 组件里面的内容会自动填充插槽里面的内容; 如果, 组件里面没有填充内容, 则显示默认的内容.

        应用场景:

可以让用户的去更好的拓展组件和自定义组件里面的内容, 还可以通过组件携带参数, 从而实现组件与组件之间的传值; 可以让代码复用与不同的场景

        如: 布局组件、表格列、下拉选项、弹框显示内容等

2. 常见的插槽有哪些?

① 默认插槽

        就是在组件内部使用<slot></slot>定义默认的DOM结构, 当组件被使用时且没有自定义内容; 那么页面显示的就是默认的DOM结构

② 具名插槽

        就是在<slot name="xxx"></slot>上设置name属性, 再组件使用的时候需要加上v-slot:xxx或#xxx来区分默认插槽

        一些特定的内容是指定给予某个插槽的, 所以就需要使用到具名插槽

③ 作用域插槽

        就是在<slot name="xxx" :a=1 :b=2>上去携带参数, 在组件被使用的时候需要加上v-slot:xxx="scope"

        从而实现子组件向父组件进行传值

3. 阐述一下组件通信和组件传值, 组件通讯解决了什么问题?

什么是组件通信?

        组件就是以".vue"后缀结尾的文件就是一个组件, 组件通信就是在组件内部使用一些方法达到组件与组件进行交互.

组件通讯解决了什么问题?

        因为在vue中每一个组件都是有自己的作用域的, 按道理来说组件与组件之间是无法数据共享的; 但是在实际工作用, 我们通常需要组件与组件之间进行数据共享.

        所以这就是组件通讯存在的意思, 组件通信就是解决了组件与组件之间数据共享的问题.

组件传值有哪些?

        父子传值:

        ① props和$emit

        父组件中自定义属性, 在子组件里面使用props接收

        子组件主动抛出一个事件($emit抛出), 父组件里面监听子组件抛出的事件

        ② $children和$parent

        $children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等

        $parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等

        兄弟组件传值:

        就是一个状态提升, A需要修改B, 我们将B的数据提升到公共的父组件里面; 然后A通过子传父修改父亲的数据, 父组件通过父传子给B

        跨层级传值:

        ① vuex

        将公共数据存放在vuex中, 组件需要时调用即可(全局数据共享)

        ② eventBus (中央事件总线)

1. 抽离成一个单独的 js 文件 Bus.js , 然后在需要的地方引入

   • A / B=> import Bus from "./Bus.js"

   • A => Bus.$emit('自定义事件名', '传输的数据')

   • B => Bus.$on('自定义事件名', function(接收的数据 ) { } )

2. 直接挂载到全局 Vue.prototype.$bus = new Vue() 使用的时候$bus.

   • A => this.$bus.$emit('自定义事件名', '传输的数据')

   • B => this.$bus.$on('自定义事件名', function(接收的数据 ) { } )

3. 注入到 Vue 根对象上面 new Vue( { data : { Bus : new Vue() } )