vue中默认插槽slot

    <div id="app">
      <!-- 1.2 那组件innerHTML位置以后不管有任何代码,都会被放进插槽那个坑里面去 -->
      <index>
        <span>首页</span>
        <span>首页</span>
        <span>首页</span>
        <h1>手机</h1>
      </index>
    </div>
    <script>
      // 插槽的作用就是组件外部取代码片段放到组件内部来
      // 1.1 定义默认插槽通过slot组件定义,定义好了之后,就相当于一个坑,你可以把它理解为电脑上usb插口
      Vue.component('index', {
        template: `
          <div>
            index
            <slot></slot>
          </div>
        `
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
    </script>
posted @ 2019-03-12 11:13  木石天涯  阅读(3654)  评论(0编辑  收藏  举报