组建代码：全局组件，局部组件（组件一定需要一个根标签）
全局组件：Vue.component(id,[definition])
局部组件：在new Vue({
components:
"a":{},
"b":{}
})
全局组件：Vue.component('sb', {
template: `<h1>你是煞笔</h1>`
})
这样所有页面中都能应用<sb></sb>这个标签组件
如果在data中有变量要运用到插槽中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<div id="app">
<sb>
<template v-slot:b>
<input type="text">
</template>
<template v-slot:a>
<button>sfasf</button>
</template>
<template v-slot:c='scorp'>
<!-- 此处也可以写成#c="{item}"。#是v-slot的缩写，｛item｝是解构 -->
<li> {{scorp.item.name}}----------{{scorp.item.age}}</li>
</template>
</sb>
</div>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("sb", {
props: ['title'],
data() {
return {
list: [{
name: 'simba',
age: 22
}, {
name: 'simba',
age: 22
}, {
name: 'simba',
age: 22
}, {
name: 'simba',
age: 22
}, {
name: 'simba',
age: 22
}, {
name: 'simba',
age: 22
}, {
name: 'simba',
age: 22
}, {
name: 'simba',
age: 22
}],
}
},
template: `
<div>
<slot name="a"></slot>
<hr>
<slot name="b" ></slot>
<slot name="c" v-for="item in list" :item=item></slot>
</div>
`
})
let vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
网友评论