vuejs

vue slot的用法

日期:2018-09-03 阅读:286


进入网易云课堂播放
    |    更多视频教程>

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
  }
}

<<点击返回