怎么在Vue組件中使用全局注冊實現(xiàn)警告框

怎么在Vue組件中使用全局注冊實現(xiàn)警告框？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

外部引入

<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>

HTML部分

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

效果

全局組件

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

例如：

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

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

1. Vue.extend()是Vue構(gòu)造器的擴展，調(diào)用Vue.extend()創(chuàng)建的是一個組件構(gòu)造器，而不是一個具體的組件實例。

2. Vue.extend()構(gòu)造器有一個選項對象，選項對象的template屬性用于定義組件要渲染的HTML。

3. 使用Vue.component()注冊組件時，需要提供2個參數(shù)，第1個參數(shù)時組件的標簽，第2個參數(shù)是組件構(gòu)造器,也就是說

4. Vue.component('標簽名',Vue.extend())=>

5. Vue.component('標簽名', {template:' '})
   

6. Vue.component()方法內(nèi)部會調(diào)用組件構(gòu)造器，創(chuàng)建一個組件實例。

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

例如：

<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: "<h2>這是我的全局組件</h2>"
   });
   new Vue({
    el: "#app1"
   })
 </script>

Prop傳值

組件實例的作用域是孤立的，父組件可以通過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動態(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:'添加失??！'
  }
})

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業(yè)資訊頻道，感謝您對億速云的支持。