10.插槽的使用

最新推荐文章于 2024-07-26 13:02:41 发布

李木子z

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量717

点赞数 1

文章标签：大数据

本文链接：https://blog.csdn.net/m0_70206803/article/details/125501181

版权

本文介绍了Vue的插槽机制，包括v-slot指令的使用，以及具名插槽的三种写法。插槽作为内容分发的API，使得组件内部能够承载和分发外部内容。

摘要由CSDN通过智能技术生成

1.什么是插槽？

插槽的指令为v-slot，它目前取代了slot和slot-scope，插槽内容，vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。

<body>
		<div id="app">
           <cpn>
			  <div>
			  	 U盘
			  </div>
		   </cpn>
		</div>
		  <!-- 子组件 -->
		  <template id="cpn">
		    <div>
				<slot></slot>
		      <div>
		        {
  {message}}
		      </div>
			  <slot><button type="button">我是一个按钮</button></slot><!-- 插槽 -->
		    </div>
		  </template>
		<script src="vue.js"></script>
		<script>
			const cpn = {
				template:'#cpn',
				data(){
					return {
						message:'我是张三'
					}
				}
			}
			const app = new Vue({
				el: "#app",
				data() {
					return {}
				},
				components:{
					cpn
				},
				methods: {