Vue学习日记--陆

slot

当组件渲染的时候， 将会被替换为自定义的值。插槽内可以包含任何模板代码。

先写一个组件。

        Vue.component("my-component",{
    
    
            template:'<div>' +
            '<slot></slot>' +//插槽
            '我是局部组件' +
            '</div>'
        }) 

使用组件：

<my-component>
	<h3>Vincent</h3>//将会被渲染到slot的位置。
</my-component>

渲染后：

可以看到数据放到slot的位置。

具名插槽

有时候我们可能需要多个插槽，这就用到了slot的一个属性“name”,
渲染时，template中的内容会被渲染到相应的插槽。

 Vue.component('my-component',{
    
    
            template:'' +
            '<div>' +
            '预留的第一个坑' +
            '<slot name ="one"></slot>' +
            '预留的第二个坑' +
            '<slot name ="two"></slot>' +
            '</div>'
        });

使用：

<my-component>
	<h3 slot="one">我是第一个萝卜</h3>
	<h3 slot="two">我是第二个萝卜</h3>
</my-component>

效果：

可以看到萝卜都被放到相应的坑里了。

持续更新