VUE入门必备（2.0）插槽和组件过渡

vue入门必备之插槽和组件过渡

插槽主要运用于组件内部的插入内容，子组件中加入元素占位，便能渲染父组件标签下的内容，分为基本插槽、具名插槽、作用域插槽
①基本插槽
插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。如果父组件为这个插槽提供了内容，则默认的内容会被替换掉

//组件内容
<div class="my-componeht">
	<p>我是组件</p>
	<slot>我是默认内容，如果父组件提供内容，我将被替换</slot>
</div>
//使用组件时，在加入插槽的位置替换插槽的相关dom
<my-component>
	<p>我可以替换插槽的内容</p>
</my-compoment>

②具名插槽
需要多个插槽时，可以使用的特性：name。

//组件中使用具名插槽  slot带name属性
<div class="card">
	   <div class="left-slot">
	       <slot name="leftSlot" ></slot>
	   </div>
	   <div>我是分割线</div>
	   <div class="card-right">
	       <slot name="rightSlot"></slot>
	   </div>
</div>
//使用组件，在具名插槽中加入html
 <card >
       <div slot="leftSlot" >
       		我是leftSlot插槽的内容
       </div>
       <div slot="rightSlot">
       		我是rightSlot插槽的内容
       </div>
</card>

③作用域插槽
主要是接收组件内部的数据，就是父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件slot-scope接收的数据放在一个自定义属性内，并定义该数据的渲染方式。

<div class="my-componeht" >
	<slot v-for="item in list" :key="item"></slot>
</div>
//使用组件时加入slot-scope属性接收数据，该插槽必须放在template标签内。此时两个组件渲染效果不同
<my-componeht>
    <template slot-scope="props">
         <li>{{props.value}}</li>
     </template>
</my-componeht>
<my-componeht>
        <template slot-scope="props">
            <h1>{{props.value}}</h1>
        </template>
</my-componeht>

组件过渡
为提升项目的交互感，我们常常增加一些过渡效果，达到视觉爽感。过渡则是为状态发生改变的内容（更新或者移除DOM元素）添加的效果。如数据改变，组件切换。一个是利用CSS过渡或者动画，另一个是利用JavaScript钩子函数。要想使元素或者组件应用到我们所写的过渡动画，需要使用vue提供的transition来封装组件成为过渡组件，transition需要与如下情景中的任一种一起使用：
v-if（条件渲染）
v-show（条件展示）
动态组件
在组建的根节点上，并且被vue实例DOM方法触发，如appendTo方法把组件添加到某个根节点上

//过渡样式
<style>
      .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
          }
      .fade-enter, .fade-leave-to {
        opacity: 0;
      }
</style>
//加入transition 的过渡元素
<div id="demo">
   <button @click="show = !show">
    点击显示与隐藏
   </button>
   <transition name="fade">
     <p v-if="show">hello</p>
   </transition>
 </div>

多组件过渡
mode是过渡模式，分为in-out和out-in

 <transition name="component-fade" mode="out-in">
  <component:is="view"></component>
 </transition>