提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue自定义组件插入值

Vue组件 自定义 插入
2023-09-14 08:58:55 时间

 我们自定义组件的时候有时候需要往组件里面插一些内容：

//定义一个组件test，插值内容用slog来代替
export default {
   name: 'test',
   template:`
        <div>
            <div>这里是test组件</div>
            <slot name="content1"></slot>
            <slot name="content2"></slot>
        </div>
    ` 
}

调用组件的时候

new Vue({
   el: '#app',
   components: { test },
   template:`
        <div>
            <test>
                <div slot="content1">这是插值内容1</div>
                <div slot="content2">这是插值内容2</div>
            </test>
        </div>
    ` 
}) 

 

 

 

当然我们也可以不定义slotName全部引入

//定义一个组件test，插值内容用slog来代替
export default {
   name: 'test',
   template:`
        <div>
            <div>这里是test组件</div>
            <slot></slot>
        </div>
    ` 
}

slot没有name属性的时候就会插入那些没有slot属性的插入内容，例如下面的’这是插值内容2‘会被插入到<slot></slot>的位置，但是‘这是插值内容1’就不会被插入了

new Vue({
   el: '#app',
   components: { test },
   template:`
        <div>
            <test>
                <div slot="content1">这是插值内容1</div>
                <div>这是插值内容2</div>
            </test>
        </div>
    ` 
})

 

相关文章