vue的组件深入了解

# .natvie

>能够在使用组件的时候,将事件传递到组件的根元素上面。(默认在调用组件的时候,写的一些事件,是不会被触发比如:click。)

# $listeners实例属性是干什么的。

>在我们调用组件的时候,可以给组件上面写上一些个事件。但是默认这个事件是不会被执行的。如果我想让他执行。需要给事件加上.native的属性。这个时候,我这个事件是绑定在组件的根元素的。。如果我需要将这个事件不绑定在根元素上。这时就需要$listeners。他里面的内容。就是你在组件调用的时候,定义的那个事件。。

#组件需要可复用性高。灵活性高。(代码不要写死)

#有时需要对组件的prop进行双向绑定

# slot

base-layout

#组件的作用域

PS:

1.组件有自己的作用域,里面的数据只能在里面自己找。找不到就报错了。

2.父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。

#作用域插槽

#对象解构

```js

varprop= {h:'msg',s:'哈哈哈哈'};

var{h} =prop; =>varh=prop.h;

var{h,s} =prop;=>varh=prop.h;vars=prop.s;

```

# keep-alive vue默认提供的一个内置组件。用于缓存当前不活动|失活|看不见的的组件或路由或。。。。

#组件动态切换会使组件被销毁。。再次出现会重建。

#如果想实现缓存组件的话,就只需要将keep-alive内置组件做为容器将他们给包裹起来。


1.原生事件

   

   

   

   Document

   

       

       

       


   

2.sync修饰符

   

       

       

       

        

        

        

        

        

        

        

        提交

   

3.slot插槽,以及插槽作用域

   

       

        

       

           

           

我是内容

           

       

   

4.slot插槽,结构赋值

   

       

           

            我是一个l-p组件的插槽内容{{ prop.s }}

            

             我是一个l-p组件的插槽内容{{ h }}

       

   

5.动态组件keep-alive

   

       首页

       列表

       关于

       

       

                        

       

   

你可能感兴趣的:(vue的组件深入了解)