Vue具名插槽的使用

一.html

	      <div id="app">
	<cpn><span slot="center">大哥</span></cpn>
	<!-- 也可以更换标签 -->
	<cpn><button slot="center">大哥</button></cpn>
	  </div>
	
	  <template id="cpn">
	    <div>
	   <slot name ="left"><span>左边</span></slot>
	    <slot name ="center"><span>中间</span></slot>
	      <slot name ="right"><span>右边</span></slot>
	  </div>
	  </template>

二.script

     const cpn ={
  template: '#cpn',
}

const app =new Vue({
  el:"#app",
  components:{
    cpn
  }
})
发布了53 篇原创文章 · 获赞 76 · 访问量 1686

猜你喜欢

转载自blog.csdn.net/weixin_45389051/article/details/104704522