Vue入门（3）插槽

最新推荐文章于 2024-12-23 09:15:21 发布

原创最新推荐文章于 2024-12-23 09:15:21 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨Vue.js中的插槽机制，包括基本插槽的使用、如何在组件内部使用slot元素承载外部传递的内容，以及具名插槽的高级用法。通过实例展示了插槽在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.插槽

插槽，内置组件slot，作为承载分发内容的出口

先看一下下面的代码：声明一个child-component组件，如果现在我想在
<child-component></child-component>内放置一些内容，结果会是怎样？

<div id="app">
    <child-component></child-component>
</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

<child-component>你好</child-component>

输出内容还是在组件中的内容Hello,World!，在 <child-component>内写的你好没起作用。

我们现在给组件增加一个插槽

Vue.component('child-component',{
    template:`
        <div>
        Hello,World!
        <slot></slot>
        </div>
    `
})

回到页面发现我们在<child-component></child-component>内写的你好起作用了！！！

没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了！

案例2:

<div id="app"></div> 
<script>
    var MyLi = {
        template:`
            <li>
                <slot></slot>
            </li>
        `
    }
    Vue.component("my-li",MyLi)
    var App = {
        template:`
            <ul>
               <my-li>111</my-li> 
               <my-li>222</my-li> 
               <my-li>333</my-li> 
               <my-li>444</my-li> 
            </ul>
        `,
    }

    var vm = new Vue({
        el: "#app",
        components:{
            app:App
        },
        template:`<app/>`
    })
</script>

2.具名插槽

在组件中，我给插槽起个名字，一个名字叫"girl"，一个名字叫"boy"，还有一个不起名字。然后再<child-component></child-component>内，slot属性对应的内容都会和组件中name一一对应。而没有名字的，就是默认插槽！

<div id="app">
	<child-component>
		<h1 slot="girl">漂亮、购物、逛街</h1>
		<h2 slot="boy">帅气、才实</h2>
		<h3>我是一类人，我是默认的插槽</h3>
	</child-component>
</div>
<script>
	Vue.component('child-component',{
		template:`
			<div>
				<h4>这个世界不仅有男人和女人</h4>
				<slot name="girl"></slot>
				<div style="height:1px;background-color:red;"></div>
				<slot name="boy"></slot>
				<div style="height:1px;background-color:red;"></div>
				<slot></slot>
			</div>
		`
	})
	let vm = new Vue({
		el:'#app',
		data:{

		}
	})
</script>