网站的资讯内容,做网站必须得ipc,火车头采集器wordpress3发布模块,小程序模板设计插槽 该页面假设你已经阅读过了组件基础。如果你还对组件不太了解#xff0c;推荐你先阅读它。 插槽内容 Vue 实现了一套内容分发的 API#xff0c;这套 API 基于当前的 Web Components 规范草案#xff0c;将 slot 元素作为承载分发内容的出口。 它允许你像这样合成…插槽 该页面假设你已经阅读过了组件基础。如果你还对组件不太了解推荐你先阅读它。 插槽内容 Vue 实现了一套内容分发的 API这套 API 基于当前的 Web Components 规范草案将 slot 元素作为承载分发内容的出口。 它允许你像这样合成组件 navigation-link url/profile Your Profile/navigation-link 然后你在 navigation-link 的模板中可能会写为 a v-bind:hrefurl classnav-link slot/slot/a 当组件渲染的时候这个 slot 元素将会被替换为“Your Profile”。插槽内可以包含任何模板代码包括 HTML navigation-link url/profile !-- 添加一个 Font Awesome 图标 -- span classfa fa-user/span Your Profile/navigation-link 甚至其它的组件 navigation-link url/profile !-- 添加一个图标的组件 -- font-awesome-icon nameuser/font-awesome-icon Your Profile/navigation-link 如果 navigation-link 没有包含一个 slot 元素则任何传入它的内容都会被抛弃。 具名插槽 有些时候我们需要多个插槽。例如一个假设的 base-layout 组件多模板如下 div classcontainer header !-- 我们希望把页头放这里 -- /header main !-- 我们希望把主要内容放这里 -- /main footer !-- 我们希望把页脚放这里 -- /footer/div 对于这样的情况slot 元素有一个特殊的特性name。这个特性可以用来定义额外的插槽 div classcontainer header slot nameheader/slot /header main slot/slot /main footer slot namefooter/slot /footer/div 在向具名插槽提供内容的时候我们可以在一个父组件的 template 元素上使用 slot特性 base-layout template slotheader h1Here might be a page title/h1 /template pA paragraph for the main content./p pAnd another one./p template slotfooter pHeres some contact info/p /template/base-layout 另一种 slot 特性的用法是直接用在一个普通的元素上 base-layout h1 slotheaderHere might be a page title/h1 pA paragraph for the main content./p pAnd another one./p p slotfooterHeres some contact info/p/base-layout 我们还是可以保留一个未命名插槽这个插槽是默认插槽也就是说它会作为所有未匹配到插槽的内容的统一出口。上述两个示例渲染出来的 HTML 都将会是 div classcontainer header h1Here might be a page title/h1 /header main pA paragraph for the main content./p pAnd another one./p /main footer pHeres some contact info/p /footer/div 默认插槽的内容 有的时候为插槽提供默认的内容是很有用的。例如一个 submit-button 组件可能希望这个按钮的默认内容是“Submit”但是同时允许用户覆写为“Save”、“Upload”或别的内容。 你可以在 slot 标签内部指定默认的内容来做到这一点。 button typesubmit slotSubmit/slot/button 如果父组件为这个插槽提供了内容则默认的内容会被替换掉。 编译作用域 当你想在插槽内使用数据时例如 navigation-link url/profile Logged in as {{ user.name }}/navigation-link 该插槽可以访问跟这个模板的其它地方相同的实例属性 (也就是说“作用域”是相同的)。但这个插槽不能访问 navigation-link 的作用域。例如尝试访问 url 是不会工作的。牢记一条准则 父组件模板的所有东西都会在父级作用域内编译子组件模板的所有东西都会在子级作用域内编译。 作用域插槽 2.1.0 新增 有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的 todo-list 组件的模板可能包含了如下代码 ul li v-fortodo in todos v-bind:keytodo.id {{ todo.text }} /li/ul 但是在我们应用的某些部分我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。 为了让这个特性成为可能你需要做的全部事情就是将待办项内容包裹在一个 slot 元素上然后将所有和其上下文相关的数据传递给这个插槽在这个例子中这个数据是 todo 对象 ul li v-fortodo in todos v-bind:keytodo.id !-- 我们为每个 todo 准备了一个插槽-- !-- 将 todo 对象作为一个插槽的 prop 传入。-- slot v-bind:todotodo !-- 回退的内容 -- {{ todo.text }} /slot /li/ul 现在当我们使用 todo-list 组件的时候我们可以选择为待办项定义一个不一样的 template 作为替代方案并且可以通过 slot-scope 特性从子组件获取数据 todo-list v-bind:todostodos !-- 将 slotProps 定义为插槽作用域的名字 -- template slot-scopeslotProps !-- 为待办项自定义一个模板-- !-- 通过 slotProps 定制每个待办项。-- span v-ifslotProps.todo.isComplete✓/span {{ slotProps.todo.text }} /template/todo-list 在 2.5.0slot-scope 不再限制在 template 元素上使用而可以用在插槽内的任何元素或组件上。 解构 slot-scope 如果一个 JavaScript 表达式在一个函数定义的参数位置有效那么这个表达式实际上就可以被 slot-scope 接受。也就是说你可以在支持的环境下 (单文件组件或现代浏览器)在这些表达式中使用 ES2015 解构语法。例如 todo-list v-bind:todostodos template slot-scope{ todo } span v-iftodo.isComplete✓/span {{ todo.text }} /template/todo-list 这会使作用域插槽变得更干净一些。转载于:https://www.cnblogs.com/e493825156/p/9034395.html
