组件中的data、组件切换功能

1. 组件可以 有自己的data和function
2. 组件中的data和实例中的data有点不一样，实例中的data可以是一个对象，而组件中的data必须 是一个方法，且必须返回一个对象。
3. 组件中的data和实例中的data使用方式上完全一样

<div id="app">
    <com1></com1>
  </div>

  <script>
    Vue.component('com1', {
      template: '<h1>使用template元素创建的组件{{msg}}</h1>',
      data: function(){
        return {
          msg: '---这是子组件数据'
        }
      }
    });
    new Vue({
      el: '#app',
    });
  </script>

 模拟登录注册切换tab，只支持两个

<div id="app">
    <a href="javascript:;" v-on:click="flag=true">登录</a> | <a href="javascript:;" v-on:click="flag=false">注册</a>
    <login v-if="flag"></login>
    <register v-else="flag"></register>
  </div>

  <script>
    Vue.component('login', {
      template: '<div class="login">登录</div>'
    });
    Vue.component('register', {
      template: '<div class="register">注册</div>'
    });
    new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {

      }
    });
  </script>

 第二种切换方式：支持多个切换

<div id="app">
    <a href="" v-on:click.prevent="cname='login'">登录</a> | <a href="" v-on:click.prevent="cname='register'">注册</a>
    <!--使用vue内置的 component 元素进行组件切换效果，支持无限个-->
    <component v-bind:is="cname"></component>
  </div>

  <script>
    Vue.component('login', {
      template: '<div class="login">登录</div>'
    });
    Vue.component('register', {
      template: '<div class="register">注册</div>'
    });
    new Vue({
      el: '#app',
      data: {
        cname: 'login'
      },
      methods: {

      }
    });
  </script>