Vue.js插槽

插槽初级使用和具名插槽看这里
插槽参考地址

标题## 编译作用域

父模板中的所有东西都会在父级作用域内编译，子模板的所有东西都会在子集作用域内编译。

  <div id="app">
    //  isShow为true，对应vue实例中app的isShow
    <my-cpn v-show="isShow"></my-cpn>
  </div>
<script  src="../vue.js"></script>
<template id="myCpn">
	<div >
	   <h2> 组件标题 </h2>
	   <p  v-show="isShow"> 我是一个组件段落 </p>  //isShow为false，对应template中myCpn的isShow
	 </div>
<template>

const app = new Vue({
 el:'app', 
 data:{ isShow:true },
 components:{
   'my-cpn' , {
	template: '#myCpn',
	data(){
	  return {
	     isShow:false;
	  }
	}.
	}
 }
 })

作用域插槽的使用

父组件替换插槽的标签（把ul换成span），但是内容（数据）由子组件来提供。

  <div id="app">
     <my-cpn > </my-cpn> //按ul序列展示
    <my-cpn >
      <template slot-scope = "scope">
         <span> {{ scpoe.data.join('  *  ') }}  </span>  //横向展示，以  *   隔开
      </template>
    </my-cpn>
  </div>
<script  src="../vue.js"></script>
<template id="myCpn">
	<div >
	  <slot :data="planguages">
		   <ul>
		   <li  v-for="item in planguages">  </li> 
		    </ul>
	  </slot>
	 </div>
<template>

const app = new Vue({
 el:'app', 
 data:{ isShow:true },
 components:{
   'my-cpn' , {
	template: '#myCpn',
	data(){
	  return {
	     planguages:['java', 'c' , 'c++', 'c#'],
	  }
	}.
	}
 }
 })

over