slot 內容分發 插槽內可以包含任何模板代碼（html 組件）
父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的。
1. html 組件
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
Vue.component('hello', {
template: `
<div class="hello">
<a>link</a>
hello
</div>
`
})
Vue.prototype.isActiveId = 1;
var myname = 'wj'
/* eslint-disable no-new */
new Vue({
el: '#app',
// router,
// store,
// components: { App },
// template: '<App/>'
// render:function(h){
// return h('hello')
// }
template:`<alert-box>
<hello />
<p>my power</p>
Something bad happened.
</alert-box>`
})
2. 后背內容
<button type="submit">
<slot>Submit</slot>
</button>
3. 具名插槽
Vue.component('hello',{
template:`
<div class="container">
<header>
<slot name="header"></slot>
<slot name="hhee"></slot>
<slot name="header-wrong"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
})
/* eslint-disable no-new */
new Vue({
el: '#app',
// router,
// store,
// components: { App },
// template: '<App/>'
template:`
<hello>
<template slot="header">
<h1>Here might be a page title</h1>
</template>
<h2 slot="hhee">hhee</h2>
<template v-slot="header-wrong">
<h1>past,wrong way</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template slot="footer">
<p>Here's some contact info</p>
</template>
</hello>
`
})
1 替代 template 多條件判斷的普通用法
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <my-component :list="list"></my-component> </div> <script src="vue.js"></script> <script> Vue.component('my-component', { props: { list: { type: Array, default: () => [] } }, render(createElement) { if (this.list.length) { return createElement('ul', this.list.map(item => createElement('li', item))) } else { return createElement('p', 'Empty list') } } }) new Vue({ el: '#app', data: { list: ['html', 'css', 'javascript'] } }) </script> </body> </html>
2 自定義指令、多組元素
Vue.component('my-component', {
data() {
return {
message: ''
}
},
render(createElement) {
return createElement(
'div',
[
createElement(
'input',
{
on: {
input: e => this.message = e.target.value
}
}
),
createElement('p', this.message)
]
)
}
})