<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件详解</title>
<script src='vue.js'></script>
</head>
<body>
<script>
// 全局组件
// Vue.component('my-hello',{
// template:'<h1>hellow word!</h1>'
// })
window.onload=function(){
new Vue({
el:"#my",
data:{
title:'子调父' ,
flag:'aa'
},
// 局部组件
components:{
'my-slot':{
template:'#myslot',
props:['name'],
data(){
return{
age:12
}
}
// directive:{
// focus:{
// inserted(el){
// el.focus();
// }
// }
// }
},
'aa':{
template:'<h1>num:{{x}}</h1>',
data(){
return{
x:Math.random()
}
}
}
}
})
}
</script>
<template id='myslot'>
<div>
<p>{{age}}</p>
<p>{{name}}</p>
<slot name='s1'></slot>
<!-- 自定义指令 -->
<input type="text" >
</div>
</template>
<div id='my'>
<!-- <my-hello/> -->
<!-- <my-hello1 :name='title'/> -->
<my-slot :name='title'>
<!-- slot内容分发套用模板时加入自己独有的元素-->
<ul slot='s1'>
<li>dddd</li>
</ul>
</my-slot>
<button @click="flag='my-slot'">my-slot</button>
<button @click="flag='aa'">aa</button>
<!-- 切换显示的组件随机数据会改变 -->
<!-- <component :is="flag"></component> -->
<!-- <keep-alive>缓存非活动组件此时切换显示的组件随机数据不变 -->
<keep-alive>
<!-- 动态组件 表示flag==my-slot时 组件my-slot显示 flag=aa时组件aa显示 -->
<component :is="flag"></component>
</keep-alive>
</div>
</body>
</html>