【VUE】VUE3插槽

插槽

在VUE开发项目的过程中&＃xff0c;插槽是重要的承载分发内容的出口。基本使用如下&＃xff1a;

• 在父组件中引入子组件&＃xff0c;并在引入子组件的标签中包裹需要传递给子组件的内容&＃xff1a;内容何以时字符串、模板代码&＃xff0c;甚至组件&＃xff1b;
• 在子组件中要包含插槽&＃xff0c;否则父组件带传递的内容将不会传递&＃xff1b;
• 当组件渲染的时候&＃xff0c; 将会被替换为“插槽内容&＃xff1a;字符串、模板代码、组件”&＃xff1a;

// 父组件

// 子组件模板



效果&＃xff1a;

注意&＃xff1a;

• 此处插槽传递的内容可以是父级模板里作用域的所有内容&＃xff0c;即父级模板的内容都是在父级作用域编译&＃xff0c;同样&＃xff0c;子模板里内容也都是在子作用域中编译的&＃xff0c;两者互不掺联。

备用内容

在插槽使用过程中&＃xff0c;可以在子组件中插槽设置备用、默认的内容 我是备用内容&＃xff0c;只在没有提供插槽内容的时候渲染。

// 父组件模板替换插槽默认内容


// 子组件模板

效果:

具名插槽

在需要多个插槽并分别给不同插槽传递不同内容时&＃xff0c;解决办法&＃xff1a;

• 给子模板设置name属性&＃xff1b;
• 给父组件使用template包裹待传递内容&＃xff0c;并添加v-slot属性&＃xff0c;属性值与子模版的name属性对应值。

// 父组件模板




// 子组件模板



效果&＃xff1a;

注意&＃xff0c;v-slot 只能添加在



注意&＃xff1a;在使用缩写时&＃xff0c;必须确定#后有参数&＃xff0c;否则会致使语法失效触发警告。

如果没有参数仍然希望使用缩写&＃xff0c;必须始终以明确插槽名取而代之&＃xff1a;

作用域插槽&＃xff1a;