Vue——邂逅Vue
Vue——Vue的基础语法
Vue——Vue的组件化
Vue——slot_插槽的基本使用
1：slot介绍
插槽演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<slots><h1>在使用插槽了呀</h1></slots>
<slots></slots>
<slots></slots>
</div>
<template id="demo1">
<div>
<a>插槽的使用</a>
<slot><button type="button">按</button></slot>
</div>
</template>
<script>
const app=Vue.extend({
template: '#demo1'
})
const demo=new Vue({
el: '#demo',
components: {
slots: app
}
})
</script>
</body>
</html>
2：具名插槽的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<slots>不是具名插槽</slots>
<slots>不是具名插槽</slots>
<slots>不是具名插槽</slots>
</div>
<template id="demo1">
<div>
<slot name="demo2">左边</slot>
<slot name="demo3">中间</slot>
<slot name="demo4">右边</slot>
<slot >插槽</slot>
</div>
</template>
<script>
const app=Vue.extend({
template: '#demo1'
})
const demo=new Vue({
el: '#demo',
components: {
slots: app
}
})
</script>
</body>
</html>
3：编译作用域
4：作用域插槽的使用
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<slots>
</slots>
<h1>aa</h1>
<template slot-scope="language">
<ul>
<li v-for="item in language.data">{{item.data}}</li>
</ul>
</template>
</div>
<template id="demo1">
<div>
<slot :data="language">
<ul>
<li v-for="item in language">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
const app=Vue.extend({
template: '#demo1',
data() {
return {
language: ['java','js','javaee'],
}
}
})
const demo=new Vue({
el: '#demo',
components: {
slots: app
}
})
</script>
</body>
</html>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
