vue 之 插槽slot

一.匿名插槽

在这个案例里面的分析

1.插槽可以很方便的替换内容

2.在app.vue中child组件内可以使用app中data的数据

child.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<template>   <div>     <a :href="myUrl">       <slot></slot>     </a>   </div> </template>   <script> export default {   name: "",   props: ["myUrl"],   data() {     return {};   },   components: {}, }; </script>   <style scoped></style>

App.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<template>   <div>     <h1>插槽</h1>     <child :url="url">       百度的链接地址为:{{url}}     </child>   </div> </template> <script> import child from "./components/Child.vue";   export default {   data() {     return {       isShow: false,       url: "https://www.baidu.com.cn",     };   },   components: {     child,   }, }; </script> <style> div {   text-align: center; } </style>

 

二.具名插槽

child.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<template>   <div>     <header>       <slot name="header">11111</slot>     </header>     <main>       <slot>22222</slot>     </main>     <footer>       <slot name="footer">33333</slot>     </footer>   </div> </template>   <script> export default {   name: "",   data() {     return {};   },   components: {}, }; </script>   <style scoped></style>

App.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<template>   <div>     <h1>插槽</h1>     <child>       <div slot="header">         <h2>这是头部的具名插槽</h2>       </div>       <div>         <h2>匿名插槽</h2>       </div>       <div slot="footer">         <h2>这是底部的具名插槽</h2>       </div>     </child>   </div> </template> <script> import child from "./components/Child.vue";   export default {   data() {     return {       isShow: false,       url: "https://www.baidu.com.cn",     };   },   components: {     child,   }, }; </script> <style> div {   text-align: center; } </style>

 

三.版本写法　　

2.6版本后的插槽的写法 与 语法糖

1.标签一定要是 template  

2.使用v-slot:插槽名

3.语法糖: 可以将 v-slot: header   改为 #header

4.父取子的插槽变量,仅限对应的插槽内使用

App.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<template>   <div>     <h1>插槽</h1>     <child>       <!-- <div slot="header"> -->       <template v-slot:header>         <h2>这是头部的具名插槽</h2>       </template>       <div>         <h2>匿名插槽</h2>        {{ msg  }} // 这里的内容不存在,也就不会出现信息,说明了即使是获取到子组件的信息,但也是插槽内部一一对象的        </div>       <template v-slot:footer>         <h2>这是底部的具名插槽</h2>       </template>     </child>   </div> </template> <script> import child from "./components/Child.vue";   export default {   data() {     return {       isShow: false,       url: "https://www.baidu.com.cn",     };   },   components: {     child,   }, }; </script> <style> div {   text-align: center; } </style>

　　

四.插槽的作用域

1.主要是父组件怎么去访问子组件的内容呢?

child.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<template>   <div>     <header>       <slot name="header" :msg="msg">11111</slot>     </header>     <main>       <slot>22222</slot>     </main>     <footer>       <slot name="footer" :msg="msg">33333</slot>     </footer>   </div> </template>   <script> export default {   name: "",   data() {     return {       msg: "张三",     };   },   components: {}, }; </script>   <style scoped></style>

　　

app.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<template>   <div>     <h1>插槽</h1>     <child>       <!-- <div slot="header"> -->       <template #header="{msg}"> <!-- 语法糖的写法 -->         <h2>这是头部的具名插槽---{{ msg }}----</h2> <!-- 用到了对象的结构 -->       </template>       <div>         <h2>匿名插槽</h2>       </div>       <template v-slot:footer="obj">  <!-- 用到了2.6版本之前的写法 -->         <h2>这是底部的具名插槽----{{ obj.msg }}----</h2>          <!-- 子组件通过插槽定义的变量传给父组件本身就是对象,通过对象获取相应的属性 -->       </template>     </child>   </div> </template> <script> import child from "./components/Child.vue";   export default {   data() {     return {       isShow: false,       url: "https://www.baidu.com.cn",     };   },   components: {     child,   }, }; </script> <style> div {   text-align: center; } </style>