这次给大家带来vue slot怎么在子组件中显示父组件传递，vue slot在子组件中显示父组件传递的注意事项有哪些，下面就是实战案例，一起来看一下。
父组件使用没有指定slot属性，默认为default
在slot中可以使用默认值，如果父组件没有传递对应的slot，则会显示默认值
html>
<meta>
<script></script>
<p>
<modal>
<!-- 调用父组件的方法 -->
<h1>aaa</h1></modal>
<modal>
<h2>bbb</h2></modal>
<modal>
<!-- 使用slot设置模板中的名字,会插入到指定的slot中 -->
<p>hello</p>
<p>
world
</p>
</modal>
<modal></modal>
</p>
<template>
<!-- 使用slot在子组件中显示父组件传过来的模板 -->
<p>
modal
<slot>如果没有会使用这个默认值</slot>
</p>
<h1>
title:
<slot>
</slot>
</h1>
content:
<slot></slot>
</template>
<script>
let modal = {
template: '#modal'
}
new Vue({
el: '#app',
components: {
// es 简写 ，只写一个的意思为
// modal:modal
modal
},
methods: {
click() {
console.log('aaa')
}
}
})
</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
