零基础学习Vue: 第27课 Vue子组件插槽引入与插入方法与获取方法$slots
以下是代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<son>
<h1 slot="qqq">测试标题</h1>
<p slot="www">测试内容</p>
<template slot='admin' slot-scope="result">
<ul>
<li v-for="(item,index) in result.admin">
{{index}}--{{item}}
</li>
</ul>
</template>
</son>
</div>
<template id="son">
<div>
<slot :admin="arr" name="admin"></slot>
<slot name="qqq"></slot>
<slot name="xxx"></slot>
{{a}}
</div>
</template>
<script>
let son = {
template:'#son',
data(){
return {
a:'我是子组件的数据',
arr:['抽烟','喝酒','烫头']
}
},
mounted(){
console.log(this)
console.log(this.$slots);
}
}
let vm = new Vue({
el:'#app',
data:{
a:'父组件的数据'
},
components:{
son
}
})
</script>
</body>
</html>
运行结果如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190424102843825.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70)