vue中插槽的用法（vue2插槽）

科技前沿 • 2025-05-12 20:10 • 阅读 48

大家好，我是讯享网，很高兴认识大家。

在Vue 3中，插槽的使用方式略有不同。Vue 3中的插槽被称为 <em>slots</em>，可以通过<<em>slot</em>>组件来定义和使用它们。下面是一个简单的示例：

&lt;template&gt; &lt;div&gt; &lt;h1&gt;父组件&lt;/h1&gt; &lt;<em>slot</em>&gt;&lt;/<em>slot</em>&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: &#39;ParentComponent&#39; } &lt;/script&gt;

讯享网

在上面的示例中，<<em>slot</em>></<em>slot</em>>组件用于定义插槽。现在，我们可以在父组件中使用该组件，并在插槽中插入子组件或其他内容：

讯享网

讯享网&lt;template&gt; &lt;div&gt; &lt;parent-component&gt; &lt;h2&gt;子组件&lt;/h2&gt; &lt;/parent-component&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import ParentComponent from &#39;https://blog.csdn.net/weixin_/article/details/ParentComponent.<em>vue</em>&#39; export default { components: { ParentComponent } } &lt;/script&gt;

在上面的示例中，<h2>子组件</h2>**入到了父组件的插槽中。

你还可以为插槽设置默认内容，如果没有提供任何内容，则会显示默认内容。让我们修改父组件稍微：

&lt;template&gt; &lt;div&gt; &lt;h1&gt;父组件&lt;/h1&gt; &lt;<em>slot</em>&gt;这是默认内容&lt;/<em>slot</em>&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: &#39;ParentComponent&#39; } &lt;/script&gt;

现在，如果我们在父组件中不提供任何内容，那么默认内容就会显示出来：

讯享网&lt;template&gt; &lt;div&gt; &lt;parent-component&gt;&lt;/parent-component&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import ParentComponent from &#39;https://blog.csdn.net/weixin_/article/details/ParentComponent.<em>vue</em>&#39; export default { components: { ParentComponent } } &lt;/script&gt;

在上面的示例中，由于未提供任何内容，所以默认内容"这是默认内容"会被显示出来。

这就是Vue 3中插槽的基本使用方式。希望能帮到你！如果还有其他问题，请随时提问。

vue中插槽的用法（vue2插槽）

相关推荐