学习前端_vue组件_slot内容分发

1.直接使用

2.通过slot=''标记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Slot内容分发</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="test">
    <my-com >
      <p slot="a">
      都是什么呀
    </p>
    <p slot="b">
      不太清楚
    </p>
  </my-com>
    <my-vue>直接使用</my-vue>
  </div>
  <template id="com">
    <div>
      <p>内容分发</p>
      <slot name='b'></slot>
      <slot name='a'></slot>
    </div>
  </template>
  <template id="myvue">
    <div>
      <p>我的vue组件</p>
      <slot></slot>
    </div>
  </template>
  <script>
    new Vue({
      el:"#test",
      components:{
        'my-com':{
          template:'#com'
        },
        'my-vue':{
          template:'#myvue'
        }
      }
    })
  </script>
</body>
</html>

来源：https://blog.csdn.net/weixin_38527697/article/details/99650885

标签

vue

内容分发

前端组件

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!