Vue——插槽

好看的网页千篇一律，有趣的代码万里挑一。

卷卷卷

组件中插槽的用法

<div id="app">

    <b-box title="iphone13">

        新一代 iPhone 支持更强的 5G 网络，尤其是 iPhone 13 系列还通过定制天线和无线电组件进一步创新，

        从而支持了更多频段，再加上高通最新的基带，相信新款 iPhone 网络性能会有一定提升。

    </b-box>

    <b-box title="iphone12">

        <img src="https://img0.baidu.com/it/u=1190923540,4182949906&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500">

    </b-box>

    <b-box title="iphone11">

        <input type="text">

        <button>购买</button>

    </b-box>

</div>

new Vue({

el:'#app',

data:{

},

// 定义组件

components:{

// 每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。

// slot 用于在组件的内部定义插槽，组件标签之间的内容，会在插槽所在位置呈现。

'b-box':{

// 组件的模板

template:`

<div class="box">

    <div class="title">{{title}}</div>

    <div class="content">

        <slot></slot>

    </div>

</div>

`,

// 定义组件标签上的属性

props:["title","content"],

// 注意：Vue实例的data选项可以是一个对象，也可以是一个方法，由该方法返回一个对象

// 但是在组件中，data选项必须是一个方法，由该方法返回一个对象

// 因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。

data() {

return {

name:'我是组件'

}

},

}

}

})