slot插槽
slot简介
当我们使用子组件中的内容需要父组件来给予时,我们可以通过prop来传递。而有时,我们需要父组件给子组件传递一个标签,这时prop就会有些束手无策。这是就可以使用slot(插槽来解决)。我们可以简单的理解为,子组件中留出了一块空间让父组件放入父组件想要的标签或者是组件。
slot的使用
- 实例
子组件代码
<template>
<div>
<h2>这里是拥有插槽的子组件</h2>
<slot></slot>
</div>
</template>
<script>
export default {
name: "SlotDemo",
data() {
return {
user:{ firstName: "谷小桐", lastName: "ming" },
order:{
lastName: "li",
firstName: "ming",
},
};
},
};
</script>
我们在子组件中通过slot标签留出接口给父组件。而父组件可以通过这个接口展示任何想要展示的标签或组件。但是需要注意的是,我们不能在子组件对slot中接收的父组件的标签进行任何设置以及访问。简单理解为,子组件没有权限。
父组件代码
<template>
<div id="app">