vue中的作用域插槽、slot

1、父组件 1.1、html部分

<div id="app"> <h2>父组件{ article.info.title }}  name: "App", components: { ScopeSlots, }, }; 

2、子组件 2.1、html部分

<div> <h3>子组件{ info.content }} name: "ScopeSlots", data() { return { info: { title: "子组件标题", content: "子组件内容", }, }; }, }; 

3、总结说明

其实说白了就是在父组件中能使用子组件的数据，并且在父组件上渲染的优先级比子组件的插槽自己渲染的值优先级高。也就是说父组件传给子组件渲染的值会把子组件插槽中原先自己的值覆盖掉。上面的例子中，子组件插槽中绑定的是content字段，但是通过传值给父组件，父组件绑定了title字段，最终渲染的是title字段的值，这就是作用域插槽。 注意：作用域插槽身上不能再绑定其他任何功能，比如无法绑定具名插槽。

4、其它插槽链接

4.1、具名插槽