插槽分发内容
2018-07-07 本文已影响0人
嗯哼_3395
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<!-- <veb>world</veb> -->
<!-- <veb>{{name}}</veb><!--这个的作用域是根实例 -->
<!--这个的作用域是veb的实现方法-->
<!-- <veb>
<template slot-scope="props">
{{props.can}}
</template>
</veb> -->
<veb>
<len slot-scope="props">
{{props.can}}
</len>
</veb>
<f><span slot="aa">你好</span></f>
<f><span slot="bb">我好</span></f>
</div>
</body>
<script>
Vue.component("veb",{
data:function(){
return{
name:"哈哈"
}
},
// template:"<h1>hello<slot></slot></h1>"
template:"<h1>hello<slot :can='name'></slot></h1>"
// template:"<h1>hello<slot></slot></h1>"
})
Vue.component("len",{
template:"<button>点击我<slot></slot></button>"
})
Vue.component("f",{
//具名槽点
template:"<button><slot name='bb'></slot></button>"
})
var box=new Vue({
el:"#box",
data:{
name:"world"
}
})
</script>
</html>
