vue知识点———

vue知识点————插槽 slot

slot 插槽在父组件中引用的子组件在父组件中写入百度可在子组件slot插槽中展示出

父组件

<template><div id="app"><child url="https://www.baidu.com">百度</child></div>
</template><script>
import child from "./components/child.vue";export default {name: "App",components: {child,},
};
</script><style>
</style>

子组件

<template><div class="child"><a :href="url"><slot></slot></a></div>
</template><script>
export default {name: "nav_child",props: ["url"],
};
</script>

在这里插入图片描述

插槽的作用域

父组件

<template><div id="app"><child url="https://www.baidu.com">百度---{{ user.name }}</child></div>
</template><script>
import child from "./components/child.vue";export default {name: "App",components: {child,},data() {return {user: {name: "作用域",},};},
};
</script><style>
</style>

子组件

<template><div class="child"><a :href="url"><slot></slot></a></div>
</template><script>
export default {name: "nav_child",props: ["url"],
};
</script>

在这里插入图片描述
这里父组件可以访问父组件的数据并且可在slot中展示到，不可以在父组件中访问子组件的数据，就相当于父组件百度—{{ user.name }}{{ url }}
这里的url是访问不到的会报错，想拿到子组件的数据请看下面的代码

具名插槽

父组件

<template><div id="app"><child><template v-slot:header><h1>header是标题</h1></div><template><p>这是一段内容在匿名插槽中显示</p></template><template v-slot:footer><p>footer是底部</p></template></child></div>
</template><script>
import child from "./components/child.vue";export default {name: "App",components: {child,},data() {return {};},
};
</script><style>
</style>

子组件

<template><div class="child"><header><slot name="header"></slot></header><main><!-- 匿名 --><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template><script>
export default {name: "nav_child",
};
</script>

在这里插入图片描述

插槽中指定name 拿到对应的数据展示，如果没有知道成为匿名也就拿没有定义name的数据

插槽父组件访问子组件数据

父组件

<template><div id="app"><child url="https://www.baidu.com" v-slot="slotProp">百度---{{ user.name }}地址为{{ slotProp.url }}</child></div>
</template><script>
import child from "./components/child.vue";export default {name: "App",components: {child,},data() {return {user: {name: "作用域",},};},
};
</script><style>
</style>

子组件

<template><div class="child"><a :href="url"><slot :url="url"></slot></a></div>
</template><script>
export default {name: "nav_child",props: ["url"],
};
</script>