vue组件之间数据传递的几种方式_vue如果 组件分散较多 数据传递用那种方式

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

            }
        }
        
    })
  

#### 二、边界 this.$root — this.$parent— this.$refs


缺点：$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。


* 在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问
* 和  
 
 
 
 
 r 
 
 
 o 
 
 
 o 
 
 
 t 
 
 
 类 
 
 
 似 
 
 
 ， 
 
 
 
 root 类似， 
 
 
 root类似，parent 属性可以用来从一个子组件访问父组件的实例
* 尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用，如（< compb ref=‘refcomb’ >< /compb >），然后通过this.$refs.refcomb来访问这个子组件实例

<script>
    const compb={
        data(){
            return{
                title:"孙子组件的数据"
            }
        },
        template:'<h2>compb-{{$root.username}}</h2>',
        mounted(){
            //获取根组件的内容
            console.log(this.$root.username)
            //获取父组件的内容
            console.log(this.$parent.title)
            console.log(this.$parent.start())
        }
    }

    const compa={
        props:['user'],
        data(){
            return{
                title:'父组件的数据'
            }
        },
        template:`

compa

`, components:{ compb }, methods:{ start(){ console.log('父组件的方法'); } }, mounted(){ console.log(this.$refs.refcomb.title); } } var vm=new Vue({ el:"#app", data:{ username:'dny' }, components:{ compa }, mounted(){ console.log(this.$refs.myinput); } })

#### 三、provide inject (依赖注入)


缺点:依赖注入将应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。同时所提供的属性是非响应式的

compa

`, components: { compb }, } var vm = new Vue({ el: "#app", data: { username: 'dny' }, //返回内容在子组件和孙子组件都可以访问到 provide: function () { return { username: this.username, foo:()=>{ return this.username } } }, })

#### 四、event-bus 事件总线


不支持响应式

compa

`, components: { compb }, } var vm = new Vue({ el: "#app", data: { username: 'dny' }, components: { compa }, methods:{ handleback(){ eventbus.$emit('message','hello world') } } })

#### 五、slot插槽


#### 六、.sync修饰符


在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之

#### 七、vuex


支持响应式，但是数据的读取和修改需要按照流程来操作，不适合小型项目

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法