VUE入门到实战--Vue非父子组件传值、插槽、动态组件和v-once

1、非父子组件传值的问题

1、Vue是一种轻量级的视图层的框架，那么遇到复杂的非父组件传值的问题我们有两种解决方法：总线机制和vuex。

1.1、总线机制

1、总线也可以叫做（Bus/总线/发布订阅模式/观察者模式）

2、这段代码如果和以前对比，不难发现：以前我们说的是子组件向父组件去传递参数，父组件去监听参数，实际都是同一个Vue实例整体，自己触发事件，自己监听。所以总线也可以自己理解，不同的组件之间只要共同拥有同一个Vue实例不就行了？所以不同组件都是Vue实例，在原型最上层去挂载一个属性，这个属性指向同一个Vue实例，这样就实现了所有Vue实例都共同拥有一个公共的Vue实例，通过这个Vue实例去触发去监听。

2、插槽

2.1、普通插槽

1、插槽实际上是父组件向子组件传递DOM元素的一种方式。DOM元素可以是任何模板代码，也可以是其他自定义的组件，但是假如在子组件的模板当中没有solt元素，则父组件传入的任何DOM元素都会被抛弃。

    
    
    
    
    


    

        
            
Dell
  
        
    
    

2、slot语法还可以设置默认值，也就是说在slot标签里面写默认的DOM元素，当父组件没有传递DOM元素的时候，我们使用slot里面的默认DOM，当有父组件传递来的DOM的时候，我们就使用父组件传来的DOM，默认值就不起作用了。

3、具名slot：当我们调整需求，我们的父组件向子组件传递了头部和尾部的DOM元素，需要在子组件中的不同位置显示出来：

    
    
    
    
    


    

        
            
header

            
footer
        
    
    

2.2、作用域插槽

1、作用域插槽使用场景：当子组件做循环，或者子组件的DOM的格式样式需要由父组件传入的时候，就会使用到作用域插槽。

2、首先我们来看一下普通的这种循环一个数组的方式：这种方式数组的元素的显示方式和格式都是由子组件定义好的，不管谁来调用这个子组件都只能使用这一种形式，但是我们有需求，不同的地方调用，我们可能需要不同格式的显示方式，那么这种方式我们需要父组件去告诉子组件你使用什么样的格式，这里就使用到了插槽。

3、使用作用域插槽，在父组件的slot-scope也可以使用解构的写法：

3、动态组件

3.1动态组件和v-once（静态）

1、在Vue当中，有一个component的标签，称为动态组件，可以根据属性is的不同值来切换不同的组件的显示：

2、在我们下面这个例子中，在点击button的时候，切换child-one组件和child-two组件的过程，其实是销毁当前显示的DOM，然后再创建即将显示的DOM，所以其实比较浪费性能，使用v-once指令后，child-one和child-two这两个组件第一次被渲染的时候，就被放在内存中了，下次用的时候就直接从内存中拿。所以通过v-once指令可以提高静态内容的展示效率。

    

        
        change
    
    

3.2、动态组件和keep-alive（动态）

1、我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题，

你每次切换新组件的时候，Vue 都创建了一个新的 currentTabComponent 实例。重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个  元素将其动态组件包裹起来。