如何理解Vue.js的组件中的slot

JavaScript017

如何理解Vue.js的组件中的slot,第1张

主要是让组件的可扩展性更强。

1.匿名slot使用

//定义组件my-component<div class="myComponent"><slot></slot></div>//使用方法<my-component><p>我就是slot的替代内容,这里可以放任何标签元素,即使是一长串ul>li列表</p></my-component>

2.具名slot使用

//定义组件my-component<div class="myComponent"><slot name="mySlot"></slot></div>//使用方法<my-component><p slot="mySlot">我就是这个叫mySlot的slot替代内容,这里可以放任何标签元素,即使是一长串ul>li列表,但是我是一个有名字的宝宝,所以你必须给我加上slot="mySlot",不然我就报错给你看!</p></my-component>

如果不在有slot的组件里加入任何标签,slot什么都不会显示的。

这里的组件化开发是使用什么?? vue-loader么... 如果是vue-loader可以通过 require来引入就可以 比如Js文件写到assets/js中 在main.js中可以 require('./src/assets/xxx.js') 如果只是单页面html,可以直接引入就行了