vue slot 在子组件中显示父组件传递的模板
更新时间：2018年03月02日 10:58:58 作者：阿豪boy
这篇文章主要介绍了vue slot 在子组件中显示父组件传递的模板,需要的朋友可以参考下
父组件使用没有指定slot属性，默认为default
在slot中可以使用默认值，如果父组件没有传递对应的slot，则会显示默认值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js" charset="utf-8"></script>
</head>
<body>
<div id="app">
<modal>
<!-- 调用父组件的方法 -->
<h1 @click='click'>aaa</h1></modal>
<modal>
<h2>bbb</h2></modal>
<modal>
<!-- 使用slot设置模板中的名字,会插入到指定的slot中 -->
<p slot='title'>hello</p>
<p slot='content'>
world
</p>
</modal>
<modal></modal>
</div>
<template id="modal">
<!-- 使用slot在子组件中显示父组件传过来的模板 -->
<div>
modal
<slot name='default'>如果没有会使用这个默认值</slot>
<h1>
title:
<slot name='title'>
</slot>
</h1>
content:
<slot name='content'></slot>
</div>
</template>
<script type="text/javascript">
let modal = {
template: '#modal'
}
new Vue({
el: '#app',
components: {
// es 简写 ，只写一个的意思为
// modal:modal
modal
},
methods: {
click() {
console.log('aaa')
}
}
})
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的vue slot 在子组件中显示父组件传递的模板，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了部属vue项目,访问路径设置非根,显示白屏的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue router动态路由下让每个子路由都是独立组件的解决方案
这篇文章主要介绍了vue router动态路由下让每个子路由都是独立组件的解决方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
el-form组件使用resetFields重置失效的问题解决
用el-form写了包含三个字段的表单,使用resetFields方法进行重置,发现点击重置或要清空校验时是失效的,所以本文给大家介绍了el-form组件使用resetFields重置失效的问题解决,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了vue实现表格数据的增删改查，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了使用vue编写h5公众号跳转小程序,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
在Vue中,父组件可以通过`ref`引用子组件,并通过`$refs`属性来访问子组件的数据,下面分步骤给大家介绍vue 父组件获取子组件里面的data数据,感兴趣的朋友一起看看吧2024-06-06
在部署 Vue.js 项目时,有时会遇到首页加载后出现白屏的情况,这可能是由于多种原因造成的,本文将介绍一些常见的排查方法和解决方案,帮助开发者快速定位问题并解决,感兴趣的小伙伴跟着小编一起来看看吧2024-08-08
今天小编就为大家分享一篇Vue中对拿到的数据进行A-Z排序的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue3+element plus中利用el-menu如何实现路由跳转
这篇文章主要给大家介绍了关于vue3+element plus中利用el-menu如何实现路由跳转的相关资料,在Vue Router中我们可以使用el-menu组件来实现菜单导航,通过点击菜单项来跳转到不同的路由页面,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了关于vue子组件获取到它父组件数据的4种方法,对于vue来说组件之间的消息传递是非常重要的,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
最新评论