Vue自定义组件插入值

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

//定义一个组件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>
    ` 
})