VUE组件通信的补充（slot）

最新推荐文章于 2025-03-28 11:01:14 发布

Huhui-coder

最新推荐文章于 2025-03-28 11:01:14 发布

阅读量367

点赞数

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/qq_40299179/article/details/79997840

版权

VUE 专栏收录该内容

13 篇文章

订阅专栏

1.最简单的slot

slot（插槽）最简单的用法就是当做父模板的备用内容。当父模板中没内容的时候，子模板中的<slot>***</slot>将会替代父模板的内容。来看个实例。

<!DOCTYPE html>
<html>
<body>
<div id="app">
<chlid-component>
<p>loren </p>
<p>loren </p>
</chlid-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('chlid-component',{
template: `
<div>\
<slot>\
<p>如果父组件中没有内容，那么我将会替代它</p>
</slot>\
</div>`
});
var app = new Vue({
el: '#app'
})
</script>

</html>

此时的页面内容为：

如果，我们将父模板的内容注释掉；

<!DOCTYPE html>
<html>
<body>
<div id="app">
<chlid-component>

</chlid-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('chlid-component',{
template: `
<div>\
<slot>\
<p>如果父组件中没有内容，那么我将会替代它</p>
</slot>\
</div>`
});
var app = new Vue({
el: '#app'
})
</script>

</html>

此时的页面内容为：也能为slot指定一个name属性，这个时候，父模板中的内容，就能与子模板的slot绑定起来了。

2.作用域插槽

作用域插槽就是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。来看一个具体的例子。

实际页面

这里的props就相当于是一个临时变量，有点像我们在执行v-for="item in items"里面的item.利用，这个props，我们可以访问到子组件里面的msg变量。注意，这里的scope="props'得写到template中，然后在子组件中插入一段带有<slot msg="~~"></slot>的标签。这样，就可以访问到子组件中的内容了。

来看一个作用域插槽slot 在列表组件中的运用。