vue 中插槽（<slot>）小记

最新推荐文章于 2023-11-04 11:05:29 发布

何必诗债换酒钱

最新推荐文章于 2023-11-04 11:05:29 发布

阅读量336

点赞数

分类专栏： Vue web前端文章标签： vue slot 插槽

本文链接：https://blog.csdn.net/u014395524/article/details/90441341

版权

Vue中插槽主要分为默认插槽、具名插槽、作用域插槽，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；但是第三种插槽就不同了，作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。下面分别看看这三种插槽的使用：

1、不带插槽

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <child>
        <p>这段文字不能显示。</p>
    </child>
</div>
<script type="text/javascript">
    var child ={
        template:`<div><p>不带插槽，不会显示组件里的内容。</p></div>`
    };
    var vm = new Vue({
        el: '#app',
        components: {
            child
        }
    });
</script>
</body>
</html>

2、带单个插槽：未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-

最低0.47元/天解锁文章

何必诗债换酒钱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 中插槽（<slot>）小记

Vue中插槽主要分为默认插槽、具名插槽、作用域插槽，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；但是第三种插槽就不同了，作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。下面分别看看这三种插槽的使用：1、不带插槽<!DOCTYPE html><h...
复制链接

扫一扫