Vue学习之组件用法实例详解

  //1、创建组件构造器
    let overallDiv=Vue.extend({
      template:`
        <div>
          <p>这是一个全局组件div</p>
        </div>
      `
    });
  //2、注册全局组件
    Vue.component('overall-div',overallDiv);
  //3、实例化,组件只有在实例化的div内才能使用，不可以直接在页面中使用
    let vue=new Vue({
      el:'#app',
      data:{},
    //在实例内注册局部组件，其创建与注册可以合为一步来写
    components:{
      'local-div':{
        template:
          ` <div>
              <p>这是一个局部组件div</p>
           </div>
          `
      }
    },
    methods:{
    }
    });

  <div id="app">
    <local-div></local-div>
    <overall-div></overall-div>
  </div>

  <template id="myTmp">
    <div>
      <p>这是页面中的模板</p>
    </div>
  </template>

  Vue.component('my-tmp',{
    template:'#myTmp'
  });

  <template id="myBtn">
    <div>
      <button @click="count++">按钮被点击{{count}}次</button>
    </div>
  </template>

  Vue.component('my-btn',{
    template:'#myBtn',
    data () {    //以函数返回的方式定义组件使用的data
      return {
        count:0
      };
    }
  });   
  <div id="app">
    <my-btn></my-btn>
    <my-btn></my-btn>
  </div>

  let child1=Vue.extend({
    template:`<div>这是子组件1</div>`
  });
  let child2=Vue.extend({
    template:`<div>这是子组件2</div>`
  });
  Vue.component('parent',{
    components:{
      'c1':child1,
      'c2':child2
    },
    //在父组件内调用子组件
    template:`<div>父组件<c1></c1><c2></c2></div>`
  });
  <div id="app">
    <parent></parent>
  </div>

  <!--匿名插槽-->
  <template id="anonymousDiv">
    <div style="width: 20%;">
      <h3>这是插槽头部</h3>
      <slot>插槽默认显示内容</slot>
      <hr/>
      <p>插槽尾部</p>
    </div>
  </template>
  let vue2=new Vue({
    el:'#app2',
    data:{
    },
    components:{
     //绑定匿名插槽
     'anonymous-slot':{
       template:'#anonymousDiv'
     },
     //绑定实名插槽
     'realname-slot':{
       template:'#realnameDiv'
     }
    }
  });

  <div id="app2">
    <anonymous-slot>
      <p>向插槽中插入一段文字</p>
    </anonymous-slot>
  </div>

<template id="realnameDiv">
<div>
  <h3>实名插槽头部</h3>
  <slot name="cpu">这是cpu插槽</slot>
  <slot name="memery">这是内存条插槽</slot>
  <slot name="HardDisk">这是硬盘插槽</slot>
</div>
</template>
<realname-slot>
  <p slot="cpu">Intel Core i5</p>
</realname-slot>