Vue组件全局注册实现警告框的实例详解

<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><script type="text/javascript" src="../js/vue-2.5.16.js"></script>

 <div class="container">   <!--动态数据绑定-->   <my-info v-bind:data='msg' v-on:close='closeHandler'></my-info>   <!--静态数据绑定-->   <my-info data="操作有误"></my-info> </div>

<script type="text/javascript">   Vue.component('my-info',{   template:`     <transition leave-active-class="animated fadeOutUpBig">     <div       v-show='isShow'        style="background:orange;          color:#fff;          padding:.5em 1em;           border-radius:5px;           margin:.5em 0;           position:relative">       <i class="fa fa-info-circle"></i>       <span>{{data}}</span>       <i @click='close' class="fa fa-close"         style="position:absolute;            right: 1em;           cursor:pointer"></i>     </div>     </transition>     `,     //注意：data必须是一个函数     data(){       return {       isShow:true       }     },     props:['data'],     methods:{       close(){       //子组件向父组件发射事件       this.$emit('close');       //关闭消息框       this.isShow = false;       }     },   });   new Vue({     el:'.container',     data:{       msg:'添加失败！'     },     methods:{       closeHandler(){       console.log('关闭了');       }    }  }); </script>

<div id="app">  <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->  <my-component></my-component></div><script>  // 1.创建一个组件构造器  var myComponent = Vue.extend({    template: '<div>这是我的全局组件</div>'  })    // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>  Vue.component('my-component', myComponent)    new Vue({    el: '#app'  });</script> 

<div id="app">   <!--该组件不会被渲染，并且报错-->   <my-component></my-component> </div> <div id="app1">   <my-component></my-component> </div> <script>   new Vue({     el: "#app"   });   Vue.component("my-component", {     template: "<h1>这是我的全局组件</h1>"   });   new Vue({    el: "#app1"   }) </script>  

<div class="father">   <child msg="hello!" data="yes!"></child> </div> Vue.component('child',{  props:['msg',"data"],  template:`<p>{{msg}}</p>       <p>{{data}}</p>       `})

<div class="father">   <child v-bind:msg="val"></child> </div> Vue.component('child',{  props:["msg"],  template:` <p>{{msg}}</p>`})new Vue({  el:'.father,  data:{     val:'添加失败！'  }})