在Vue中使用插槽
2019-01-02 本文已影响20人
puxiaotaoc
1、插槽只能有一个；
2、具名插槽可以有多个；
// 未使用slot
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>在Vue中使用插槽</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<child content='<p>dsfsd</p>'></child>
</div>
<script>
Vue.component('child', {
props: ['content'],
template: `<div>
<p>hello</p>
<div v-html="this.content"></div>
</div>`
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
// 使用content
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>在Vue中使用插槽</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<child>
<!-- <h1>hello</h1> -->
</child>
</div>
<script>
Vue.component('child', {
props: ['content'],
template: `<div>
<slot>默认内容</slot>
<p>world</p>
</div>`
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
// 具名插槽
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>在Vue中使用插槽</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<body-content>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</body-content>
</div>
<script>
Vue.component('body-content', {
props: ['content'],
template: `<div>
<slot name='header'>defanlt header</slot>
<div class="content">content</div>
<slot name='footer'></slot>
</div>`
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
