网站建设资讯

NEWS

网站建设资讯

vue使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】-创新互联

本文实例讲述了vue 使用插槽分发内容操作。分享给大家供大家参考,具体如下:

在文登等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站制作、成都网站建设 网站设计制作按需定制,公司网站建设,企业网站建设,品牌网站建设,成都营销网站建设,成都外贸网站制作,文登网站建设费用合理。

单个插槽

除非子组件模板包含至少一个  插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。

最初在  标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容

例:





Vue 测试实例 - 单个插槽



 

我是父组件的标题

这是一些初始内容

这是更多的初始内容

var childNode = { //当没有时,父组件的其他内容不会显示,当有时,要是父组件中的内容不为空, //中的内容就不会显示 template: `

我是子组件的标题

只有在没有要分发的内容时才会显示。
`, }; // 创建根实例 new Vue({ el: '#example', components: { 'my-component': childNode } })

网页名称:vue使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】-创新互联
本文链接:http://njwzjz.com/article/jdgji.html