快捷導(dǎo)航

Vue組件全局注冊實(shí)現(xiàn)警告框的實(shí)例詳解

更新時(shí)間：2018年06月11日 09:37:20 作者：ChinneJi

這篇文章主要介紹了Vue組件全局注冊實(shí)現(xiàn)警告框的實(shí)例,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

外部引入

<link  rel="stylesheet">
<link  rel="stylesheet">
<script type="text/javascript" src="../js/vue-2.5.16.js"></script>

HTML部分

 <div class="container">
   <!--動(dòng)態(tài)數(shù)據(jù)綁定-->
   <my-info v-bind:data='msg' v-on:close='closeHandler'></my-info>
   <!--靜態(tài)數(shù)據(jù)綁定-->
   <my-info data="操作有誤"></my-info>
 </div>

script部分

<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必須是一個(gè)函數(shù)
     data(){
       return {
       isShow:true
       }
     },
     props:['data'],
     methods:{
       close(){
       //子組件向父組件發(fā)射事件
       this.$emit('close');
       //關(guān)閉消息框
       this.isShow = false;
       }
     },
   });
   new Vue({
     el:'.container',
     data:{
       msg:'添加失??！'
     },
     methods:{
       closeHandler(){
       console.log('關(guān)閉了');
       }
    }
  });
 </script>

效果

全局組件

組件的創(chuàng)建和注冊分成3步：創(chuàng)建組件構(gòu)造器，注冊組件，掛載作用域內(nèi)實(shí)例化

例如：

<div id="app">
  <!-- 3. #app是Vue實(shí)例掛載的元素，應(yīng)該在掛載元素范圍內(nèi)使用組件-->
  <my-component></my-component>
</div>
<script>
  // 1.創(chuàng)建一個(gè)組件構(gòu)造器
  var myComponent = Vue.extend({
    template: '<div>這是我的全局組件</div>'
  })
  
  // 2.注冊組件，并指定組件的標(biāo)簽，組件的HTML標(biāo)簽為<my-component>
  Vue.component('my-component', myComponent)
  
  new Vue({
    el: '#app'
  });
</script>

我們來理解組件的創(chuàng)建和注冊：

Vue.extend()是Vue構(gòu)造器的擴(kuò)展，調(diào)用Vue.extend()創(chuàng)建的是一個(gè)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例。
Vue.extend()構(gòu)造器有一個(gè)選項(xiàng)對(duì)象，選項(xiàng)對(duì)象的template屬性用于定義組件要渲染的HTML。
使用Vue.component()注冊組件時(shí)，需要提供2個(gè)參數(shù)，第1個(gè)參數(shù)時(shí)組件的標(biāo)簽，第2個(gè)參數(shù)是組件構(gòu)造器,也就是說
Vue.component('標(biāo)簽名',Vue.extend())=>
Vue.component('標(biāo)簽名', {template:' '})
Vue.component()方法內(nèi)部會(huì)調(diào)用組件構(gòu)造器，創(chuàng)建一個(gè)組件實(shí)例。

全局組件必須寫在Vue實(shí)例創(chuàng)建之前，才在該根元素下面生效

例如：

<div id="app">
   <!--該組件不會(huì)被渲染，并且報(bào)錯(cuò)-->
   <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>

Prop傳值

組件實(shí)例的作用域是孤立的，父組件可以通過props向下傳遞數(shù)據(jù)給子組件。

Prop靜態(tài)傳遞數(shù)據(jù)

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

Prop動(dòng)態(tài)傳遞數(shù)據(jù)

<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:'添加失?。?
  }
})

總結(jié)

以上所述是小編給大家介紹的Vue組件全局注冊實(shí)現(xiàn)警告框的實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: