大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本文实例讲述了vue 使用插槽分发内容操作。分享给大家供大家参考,具体如下:
专注于为中小企业提供成都网站建设、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业平度免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
单个插槽
除非子组件模板包含至少一个
最初在
例:
Vue 测试实例 - 单个插槽 var childNode = { //当没有我是父组件的标题
这是一些初始内容
这是更多的初始内容
时,父组件的其他内容不会显示,当有 时,要是父组件中的内容不为空, //中的内容就不会显示 template: ` `, }; // 创建根实例 new Vue({ el: '#example', components: { 'my-component': childNode } })我是子组件的标题
只有在没有要分发的内容时才会显示。
具名插槽
仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。
Vue 测试实例 - 具名插槽 这里可能是一个页面标题
主要内容的一个段落。
另一个主要段落。
这里有一些联系信息
作用域插槽
作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。
在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:
在父级中,具有特殊特性 slot-scope 的 元素必须存在,表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象:
在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 。
Vue 测试实例 - 作用域插槽
希望本文所述对大家vue.js程序设计有所帮助。