vue学习十二( v-model用于自定义组件、父子组件通信、组件绑定原生事件、具名插槽、插槽作用域、动态组件is和keep-alive)

自定义组件的 v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突

 

        
        {{lovingVue}}

    

    

效果图：

子组件跟父组件通信

 

        
{{total}}
        
        
    
    

效果如下：

将原生事件绑定到组件

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：

   

        
        
我是元素
    
    

单个插槽

输出如下：

我是父组件的标题
我是子组件的标题
这是一些初始内容

这是另外一些初始内容

插槽内容

到现在，我们知道了什么是插槽：

插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口

    

        哈哈{{a}}

    
    

我们现在给组件增加一个插槽
我们在内写的"你好"起作用了！！！

效果如下：

Hello,World! 哈哈haha

具名插槽

        

                
                    
                    
                    

                        我是一类人，
                        我是默认的插槽
                    
                
            
            

效果如下：

作用域插槽

先看一个最简单的例子！！

我们给元素上定义一个属性say（随便定义的！），接下来在使用组件child，然后在template元素上添加属性slot-scope！！随便起个名字a

我们把a打印一下发现是 {“say” : “你好”}，也就是slot上面的属性和值组成的键值对！！！

这就是作用域插槽

我可以把组件上的属性/值，在组件元素上使用！

效果如下：

{ "say": "你好" }

is 特性实现动态组件

我们在一个多标签的界面中使用 is 特性来切换不同的组件
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

    

        切换页面
        
    

    

动态组件使用 keep-alive

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

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：

你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。

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

我们来看一个例子

        切换页面