vue 插槽

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
     <div id="root">
        <child>
              <p>World</p>
        </child>
     </div>
     <script>
           Vue.component('child',{
                template:'<div><p>Hello</p><slot 默认内容></slot></div>'
           });
           var vm=new Vue({
                 el:'#root',
           })
     </script>
</body>
</html>

　　效果；

 

posted @ 2018-05-16 21:07  1点  阅读(115)  评论(0)  编辑  收藏  举报