Vue插槽原理与用法详解
本文实例讲述了Vue插槽原理与用法。分享给大家供大家参考，具体如下：
成都创新互联公司专注于长岛企业网站建设,响应式网站设计,电子商务商城网站建设。长岛网站建设公司,为长岛等地区提供建站服务。全流程按需求定制制作，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务
1 插槽内容
Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将
它允许你像这样合成组件：
Your Profile
然后你在
当组件渲染的时候，这个
插槽内可以包含任何模板代码，包括 HTML：
Your Profile
甚至其它的组件：
Your Profile
如果
2 具名插槽
有些时候我们需要多个插槽。例如，一个假设的
对于这样的情况，
在向具名插槽提供内容的时候，我们可以在一个父组件的 元素上使用 slot特性：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
另一种 slot 特性的用法是直接用在一个普通的元素上：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。上述两个示例渲染出来的 HTML 都将会是：
Here might be a page title
A paragraph for the main content.
And another one.
3 默认插槽的内容
有的时候为插槽提供默认的内容是很有用的。例如，一个
你可以在
如果父组件为这个插槽提供了内容，则默认的内容会被替换掉。
4 编译作用域
当你想在插槽内使用数据时，例如：
Logged in as {{ user.name }}
该插槽可以访问跟这个模板的其它地方相同的实例属性 (也就是说“作用域”是相同的)。但这个插槽不能访问
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
5 作用域插槽
2.1.0+ 新增
有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的
Vue.component('todo-list',{
template:`
- {{ todo.text }}
但是在我们应用的某些部分，我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。
为了让这个特性成为可能，你需要做的全部事情就是将待办项内容包裹在一个
-
{{ todo.text }}
现在当我们使用 作为替代方案，并且可以通过 slot-scope特性从子组件获取数据：
✓ {{ slotProps.todo.text }}
在 2.5.0+，slot-scope 不再限制在 元素上使用，而可以用在插槽内的任何元素或组件上。
解构 slot-scope
如果一个 JavaScript 表达式在一个函数定义的参数位置有效，那么这个表达式实际上就可以被 slot-scope接受。也就是说你可以在支持的环境下 单文件组件或现代浏览器)，在这些表达式中使用 ES2015 解构语法。例如：
✓ {{ todo.text }}
这会使作用域插槽变得更干净一些。
希望本文所述对大家vue.js程序设计有所帮助。
分享名称：Vue插槽原理与用法详解
本文链接：http://6mz.cn/article/iiijjg.html