实名插槽
-
<strong>实名solt</strong>
-
假设你的电脑主板上的各种插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的，所以假设有个组件是computer，其模板是：
<template id="computer"> <div> <slot name="CPU">这儿插你的CPU</slot> <slot name="GPU">这儿插你的显卡</slot> <slot name="Memory">这儿插你的内存</slot> <slot name="Hard-drive">这儿插你的硬盘</slot> </div> </template> -
那么，你想要配置一台电脑，就可以这么写：
<computer> <div slot="CPU">Intel Core i7</div> <div slot="GPU">GTX980Ti</div> <div slot="Memory">Kingston 32G</div> <div slot="Hard-drive">Samsung SSD 1T</divt> </computer>
-
-
具体代码如下：
<body>
<div id="app">
<h2>当前电脑配置</h2>
<!--注意:对应名字不要写错-->
<my-computer>
<div slot="cpu">Inter Core i7</div>
<div slot="gpu">GTX1050Ti</div>
<div slot="memory">Kingston 16G</div>
<div slot="hard-drive">WD SSD 1T</div>
</my-computer>
</div>
<!-- 自定义组件 -->
<template id="computer">
<div>
<slot name="cpu">这里插cpu</slot>
<slot name="gpu">这里插gpu</slot>
<slot name="memory">这里插内存</slot>
<slot name="hard-drive">这里插硬盘</slot>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
//实例化组件
Vue.component('my-computer', {
template:'#computer'
});
new Vue({
el:'#app'
});
</script>
网友评论