vuejs
vue slot的用法
日期：2018-09-03 阅读：1118
dmandwp系统 - wordpress系统和DM系统区块建站>>
进入网易云课堂播放 | 更多视频教程>
https://www.cnblogs.com/waitforyou/p/6773978.html
模板：
父模板： Home.vue
<HelloWorld msg="Welcome to Your Vue.js App">
<div style="border:2px solid red">11111111111 </div>
<img slot="slot1" alt="Vue logo" src="../assets/logo.png">
<div slot="slot2" style="border:2px solid red">11111111111 </div>
<div slot="slot3" style="border:2px solid blue">22222222 </div>
</HelloWorld>
子模板：
HelloWorld.vue
<template>
<slot ></slot> --- 这种没有name的，会把父级上面的内容都会传过来。
<slot name = "slot2">ccccccccc</slot> --里面的cccc....不会输出，只是一种提示文字
<slot name = "slot3"></slot>
<slot name = "slot1"></slot>
</template>
----------------------
补充话题：
子模板如果不以.vue文件存在，可以在Home.vue里这样写：
var HelloWorldcc= {
template: ' 这里把上面<template>里的内容写进来'
}
export default {
name: 'home',
components: {
HelloWorld : HelloWorldcc
}
(这种方式，会出现错误：You are using the runtime-only build of Vue where the template compiler is not available，所以还是用下面.vue文件的方式。)
--------------
如果是.vue文件，就这样调用：
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}