当定义完一个组件后，可能在使用时还需要往这个组件中插入新的元素或者文本。这个时候就可以使用插槽来完成。
- 在定义`template`时，在需要插入的地方使用`<slot></slot>`标识出来。在使用时只需将传递的值放在定义的组件标签包裹起来即可。
- 插槽可以设置默认值。在定义template时，用`slot`标签包裹起来即可，当没有传递值时就使用默认值，但传值后，则使用新的值。
- 插槽当中的变量是从父组件的变量中读取的，而非从该组件中读取。也就是说：在插槽中使用`{{ }}` 定义的变量时，这个变量一定是在使用父组件的data中定义的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>vue中插槽</title>
</head>
<body>
<div id="app">
<nav-link url="https://www.baidu.com">百度</nav-link>
</div>
<script>
Vue.component(‘nav-link‘, {
props: [‘url‘],
template: `
<div>
<nav><a :href="url"><slot>谷歌</slot></a></nav>
</div>
`
})
new Vue({
el: "#app",
data: {
}
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/xshan/p/12344613.html
时间： 2024-11-07 07:38:37