<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue1</title> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> <link rel="stylesheet" type="text/css" href="vue.css"> </head> <body> <div id="app"> <comp :msg="msg"> <h1 >tongyong</h1> <h1 slot=s1>S1slot</h1> </comp> </div> <script> var comp={ //在组件中插入html会放到slot插槽处 //具名插槽s1会放相应的slot=s1的内容 template:`<div> <h1>first line</h1> <slot name="s1"></slot> <h1>second line</h1> <slot ></slot> <h1>third line</h1> {{msg}}</div>`, } var app=new Vue({ el:"#app", components:{ comp } }) </script> </body> </html>
vue-插槽和具名插槽
猜你喜欢
转载自www.cnblogs.com/JinweiChang/p/12658009.html
今日推荐
周排行