之前的文章我们说了一下 vue 中组件的原生事件绑定, 本章我们来所以下 vue 中的插槽使用.
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child title="<p > 你好 世界 </p>">
- </child>
- </div>
- <script>
- Vue.component("child", {
- props: ['title'],
- template: ` < div > {
- {
- title
- }
- } < p > hello world < /p>
- </div > `
- });
- var App = new Vue({
- el: '#app',
- })
- </script>
- </body>
- </HTML>
上面的代码中, 我们通过 title=""形式通过父组件向子组件 child 传递了一个"<p > 你好世界 </p>" 的带标签的内容, 然后我们在子组件中输出, 结果如下:
显示结果是按字符串展示的, 但我们想要的是不带标签的输出结果, 在之前的文章中我们说过可以通过 v-HTML 来进行转义, 代码如下:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child title="<p > 你好 世界 </p>">
- </child>
- </div>
- <script>
- Vue.component("child", {
- props: ['title'],
- template: ` < div > <div v - HTML = "title" > </div>
- <p>hello world</p > </div>
- `
- });
- var App = new Vue({
- el: '#app',
- })
- /
- </script>
- </body>
- </HTML>
我们把 template 中的 {{title}} 改成了 v-HTML 的形式输出, 结果如下:
输出结果没问题, 但是当我们看控制台的 HTML 代码时发现外层多加了一个 <div> 标签, 这显然不友好,, 这时可能有人会想到模板标签 <template v-HTML="title"> 这样写, 但是这样的话在页面上是不会输出内容的. 而且如果 <child> 标签内的 title 属性里面的内容并不只是一个 <p> 标签, 还有很多其他的内容, 例如 "<p > 你好 世界 < p><p > 你好 世界 < p><p > 你好 世界 < p><p > 你好 世界 < p><p > 你好 世界 < p><p > 你好 世界 < p>" 这么长的内容, 在代码里也不好看.
如何解决上面的问题, Vue 官方为我们提供插槽 slot, 我们可以将代码改成如下:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child>
- <p>
- 你好 世界
- </p>
- </child>
- </div>
- <script>
- Vue.component("child", {
- template: ` < div > <slot > </slot>
- <p>hello world</p > </div>
- `
- });
- var App = new Vue({
- el: '#app',
- })
- /
- </script>
- </body>
- </HTML>
我们将 p 标签想要输出的内容直接放在了 <child> 标签内, 然后在 template 中添加标签 <slot>, 意思就是将 <child> 内的内容通过 slot 插槽插入子组件, 结果如下:
完美解决了我们的问题, 而且 <slot> 标签内还可以自定义我们想要输出的内容, 如果 <child> 标签内没有内容的话以自定义的内容输出, 如下:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child>
- </child>
- </div>
- <script>
- Vue.component("child", {
- template: ` < div > <slot > 插槽自定义内容 < /slot>
- <p>hello world</p > </div>
- `
- });
- var App = new Vue({
- el: '#app',
- })
- /
- </script>
- </body>
- </HTML>
我们在 <child> 标签内没有内容, 在 slot 标签内插入了一些内容, 在页面显示如下:
上面的 "插槽自定义内容" 在 <child> 内没有内容时输出, 如果有内容则输出 <child> 标签内的内容.
上面的插槽形式我们可以称之为无名插槽, 还有一种插槽叫具名插槽, 看以下代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child>
- <header>
- 我是 header
- </header>
- <footer>
- 我是 footer
- </footer>
- </child>
- </div>
- <script>
- Vue.component("child", {
- template: ` < div > <slot > </slot>
- <p>hello world</p > <slot > </slot>
- </div > `
- });
- var App = new Vue({
- el: '#app',
- })
- </script>
- </body>
- </HTML>
我们想要一种效果, 就是自定义插槽的内容位置, 假设上的代码中 <header> 标签内的内容为头部信息,<footer> 标签内的内容为底部信息, 我们想让它们分别输出在 template 模板中 p 标签的上下, 结果如下:
输出内容显然不是我们想要的结果, 我们每用一次 <slot> 标签就会在页面输出一次, 那该如何解决这个问题呢, 我们可以使用具名插槽来为我们的插槽定义名称, 如下:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- vue
- </title>
- <script src="https://cdn.jsdelivr.net/npm/vue">
- </script>
- </head>
- <body>
- <div id="app">
- <child>
- <header slot="header">
- 我是 header
- </header>
- <footer slot="footer">
- 我是 footer
- </footer>
- </child>
- </div>
- <script>
- Vue.component("child", {
- template: ` < div > <slot name = "header" > </slot>
- <p>hello world</p > <slot name = "footer" > </slot>
- </div > `
- });
- var App = new Vue({
- el: '#app',
- })
- </script>
- </body>
- </HTML>
在上面的代码中, 我们分别为 <header> <footer> 标签添加 slot 属性, 然后在 template 中的 <slot> 标签内以 name 属性来分别对应标签 <header> <footer> 内的 slot 属性值, 这样就将指定的内容输出, 结果如下:
完美解决我们的问题.
来源: https://www.cnblogs.com/weijiutao/p/10683465.html