Vue 的插槽感觉上是一个组件函数，和函数一样进行参数的传递来改变组件的据题内容。
使用指令：v-slot
//插口的基本使用
<body> <div id="app"> <!-- 传入元素参数 --> <login><span>demo</span></login> </div> </body> <template id="login"> <div> <!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数--> <slot><h3>heee</h3></slot> </div> </template> <script> const login = { template:"#login" } new Vue({ el:"#app", components:{ login } }) </script>
当要有多个插口时，各个插口是如何分辨插口的内容的。
<body> <div id="app"> <!-- 传入元素参数 --> <login>
//必须通过template进行包裹 使用v-slot命令进行具名分析 <template v-slot:name1> <span >demo1</span> </template> <template v-slot:name2> <span>demo2</span> </template> <template v-slot:name3> <span >demo3</span> </template> </login> </div> </body> <template id="login"> <div> <!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数--> <slot name="name1"><h3>插口1</h3></slot> <slot name="name2"><h3>插口2</h3></slot> <slot name="name3"><h3>插口3</h3></slot> </div> </template> <script> const login = { template:"#login" } new Vue({ el:"#app", components:{ login } }) </script>
//感觉上和命名视图相类似的使用
// 编译作用域 <navigation-link url="/profile"> Clicking here will send you to: {{ url }} <!-- 这里的 `url` 会是 undefined，因为 "/profile" 是 _传递给_ <navigation-link> 的而不是 在 <navigation-link> 组件*内部*定义的。 --> 在template元素中使用的属性只能在tempalte中 外部是无法访问到的。 </navigation-link>
//父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
//子组件的数据显示样式改变 不是默认的显示模式
<body> <div id="app"> <!-- 传入元素参数 --> <login> <!-- 绑定的数据是将上就是子组件中的数据 但是 只是可以改变数据的输出样式 也就是父组件替换插槽的标签 内容还是由子组件提供 --> <template v-slot:default="slotProps"> ----{{slotProps.user.uel}} </template> </login> </div> </body> <template id="login"> <div> <!-- slot就是将插口，可以将元素参数存放到插口中 其中H3标签元素就是默认参数--> <slot v-bind:user="user">{{user.name}}</slot> </div> </template> <script> const login = { template:"#login", data:function(){ return { user:{ name:"xiaoming", uel:"ddd" } } } } new Vue({ el:"#app", data:{ }, components:{ login } }) </script>