vue（2）组件

1. 构造组件
   一般在body中通过template模板构造，并为template模板起一个id，在实例化对象中接收id

<div id="app">
    <mycom title="title1111"></mycom>------->可以在挂载函数中通过属性定义的方式为组件传值
    <p>{{msg}}</p>
  </div>

<template id="temp">
    <div>
      组件 {{ title }}
      <p>{{msg}}</p>
    </div>
  </template>
  
  let vm = new Vue({
      el: '#app',
      components: {
        'mycom': {
          template: '#temp',
          props: ['title'],      ---------->props里的属性在子组件里不允许修改
          data () {              ---------->组件中的data需要通过return的方式返回值
            return {
              msg: '123456789'
            }
          }
        }
      },
    })

2. 组件调用挂载函数中的方法

<div id="app">
    <mycom @close="hide"></mycom>         --------->被调用的方法
  </div>

<template id="temp">
    <div>
        <button @click="closeit">子组件按钮</button>--------->为子组件定义方法
    </div>
  </template>
  
  let vm = new Vue({
      el: '#app',
      components: {
        'mycom': {
          template: '#temp',
          methods: {
            closeit(){
                this.$emit('close')        --------->通过this.$emit('被调用的方法') 调用方法
            }
          }
        }
      }，
      methods: {
        hide(){
            this.islogin=false
            this.isregister=false
        }
      }
    })

3. 插槽

 <div id="app">
    <my-com>
      <div slot="slot">
            <p>
                用户名1<input type="text">
            </p>
            <p>
                密码1<input type="text">
            </p>
       </div>
    </my-com>
    
    <my-com>
      <div slot="slot">
            <p>
                用户名2<input type="text">
            </p>
            <p>
                密码2<input type="text">
            </p>
       </div>
    </my-com>
  </div>
  
   <template id="temp">
            <header> </header>
           
            <!-- 插槽占位 -->
            <slot name="slot1"></slot>

            <button></button>
    </template>