slot--使用插槽分发内容(位置、槽口;作用: 占个位置)
官网API:
使用组件时,有时子组件不知道会收到什么内容,这是由父组件决定的。
一、单个插槽
1.my-component 组件:2.父组件:我是子组件的标题
只有在没有要分发的内容时才会显示。 3.渲染结果:我是父组件的标题
这是一些初始内容
这是更多的初始内容
我是父组件的标题
我是子组件的标题
这是一些初始内容
这是更多的初始内容
二、具名插槽
slot根据不同的name名称分发内容,多个插槽可以有不同的名字。
仍然可以有匿名的默认插槽,为了找不到匹配的内容片段使用,如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。
1.my-component 组件:2.父组件:3.渲染结果: 这里可能是一个页面标题
主要内容的一个段落。
另一个主要段落。
这里有一些联系信息
这里可能是一个页面标题
主要内容的一个段落。
另一个主要段落。
三、作用域插槽
作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。
1.子组件:2.父组件: 3.渲染结果:hello from parent { { props.text }} hello from parent hello from child