vue基础（二）

组件化高级

#### 插槽的基本使用
<div id="app">
	<cpn></cpn>
	<cpn></cpn>
	<cpn><i>1312321</i></cpn>
	<cpn></cpn>
</div>
<template id='cpn'>
	<div>
		<h2>1111</h2>
		<h3>22222</h3>
		<slot></slot>  //替换
	</div>
</template>
<script>

    const app = new Vue({
        el: "#app",
        data: {
            message: '你好',
        },
		components:{
			cpn:{
				template:'#cpn'
			}
		}
    })
	const cpn = {
		  template:'#cpn',
		  data(){
			  return{
			  }
		  } 
	}
</script>
 

具名插槽的使用

<div id="app">
	<cpn><span slot='center'>321321312312</span></cpn>
	<cpn><button slot='left'>返回</button></cpn>
</div>
<template id='cpn'>
	<div>
		<slot name='left'><span>左边</span></slot> 
		<slot name='center'><span>中间</span></slot>
		<slot name='r'><span>右边</span></slot> 
	</div>
</template>
<script>

    const app = new Vue({
        el: "#app",
        data: {
            message: '你好',
        },
		components:{
			cpn:{
				template:'#cpn'
			}
		}
    })
	const cpn = {
		  template:'#cpn',
	}
</script>

编译的作用域

插槽的案例

<div id="app">
	<cpn></cpn>
	<cpn>
		<template slot-scope='slot'>
			<span v-for='item in slot.data'>
				{{item}}-
			</span>
			
		</template>
	</cpn>
	<cpn>
		<template slot-scope='slot'>
			<span>
				{{slot.data.join('--')}}
			</span>
		</template>
	</cpn>
</div>
<template id='cpn'>
	<div>
		<slot :data='pLang'>
			<ul>
				<li v-for='item in pLang'>{{item}}</li>
			</ul>
		</slot>
	</div>
</template>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好',
			isShow:true
        },
		components:{
			cpn:{
				template:'#cpn',
				data(){
					return{
						pLang:['a0','b','v','d','r']
					}
				}
			}
		}
    })
</script>

模块化开发

导出  type='module'
方式1
export{
	flag,
	num
}
方式2
export var num=1000;
导出函数/类
export function null(a,b){
	return 1+1;
}
export class person{ //导出类
	run(){}
}
import {num,person} from "./xx.js" 
const address='山东济南'
export default address; //不命名

import add from "./xx.js"  //使用default 同一个模块里只能有一个，  add 不需要加{}
import * as abc from "./xx.js" 
alert(abc.num)

#路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import Test from '@/components/Test'
const Test = () => import("@/components/Test")
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'test',
      component:Test //或直接() => import("@/components/Test")
    }
  ]
})