快捷導(dǎo)航

深入淺析Vue全局組件與局部組件的區(qū)別

更新時(shí)間：2018年06月15日 15:32:38 作者：兵騰傲宇

這篇文章主要介紹了Vue全局組件與局部組件的區(qū)別，通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1、組件聲明

<!-- 全局組件模板father模板 --> 
<template id="father"> 
  <div> 
     <h3>這是{{name}}</h1> 
     <div> 
       <p>這是{{data}}</p> 
     </div> 
  </div> 
</template> 

var FATHER = { 
  template: "#father", 
  data: function() { 
     return { 
       name: "一個(gè)全局組件-模板-", 
       data: "數(shù)據(jù)：18892087118" 
     } 
   } 
 };

2、組件注冊(cè)

Vue.component('father', FATHER);

3、組件掛載

<h5>全局組件1</h5> 
<father></father>

4、組件實(shí)例

<!DOCTYPE html> 
<html> 
<head> 
  <title>vue2.0 --- 局部組件與全局組件</title> 
</head> 
<body> 
  <h3>vue2.0局部組件與全局組件</h3> 
  <div id='app'> 
    <h5>局部組件</h5> 
    <fatherlocal></fatherlocal> 
    <hr> 
    <h5>全局組件1</h5> 
    <father></father> 
    <hr> 
    <h5>全局組件2</h5> 
    <child :fromfather='giveData'></child> 
  </div> 
  <!-- 局部組件模板fatherlocal --> 
  <template id="father-local"> 
    <div> 
      <h3>這是{{name}}</h1> 
      <div> 
        <p>這是{{data}}</p> 
      </div> 
    </div> 
  </template> 
  <!-- 全局組件模板father --> 
  <template id="father"> 
    <div> 
      <h3>這是{{name}}</h1> 
      <div> 
        <p>這是{{data}}</p> 
      </div> 
    </div> 
  </template> 
  <template id="child"> 
    <div> 
      <h3>這是{{name}}</h3> 
      <div> 
        <p>{{cmsgtwo}}</p> 
        <p>{{cmsg}}</p> 
        <p>{{fromfather}}</p> 
        <p>{{fromfather.fmsg}}</p> 
        <p><input type="button" value="按鈕" @click=" "></p> 
      </div> 
    </div> 
  </template> 
  <script src="vue_2.2.2_vue.min.js"></script> 
  <script type="text/javascript"> 
    // 定義組件 
    var FATHER = { 
      template: "#father", 
      data: function() { 
        return { 
          name: "一個(gè)全局組件-模板-", 
          data: "數(shù)據(jù)：18892087118" 
        } 
      } 
    }; 
    var CHILD = { 
      template: "#child", 
      data: function() { 
        return { 
          name: "子組件", 
          cmsg: "子組件里的第一個(gè)數(shù)據(jù)", 
          cmsgtwo: "子組件里的第二個(gè)數(shù)據(jù)" 
        } 
      }, 
      methods: { 
        change: function() { 
          this.fromfather.fmsg = "子組件數(shù)據(jù)被更改了" 
        } 
      }, 
      mounted: function() { 
        this.cmsg = this.fromfather; 
      }, 
      props: ["fromfather"], 
    }; 
    // 注冊(cè)組件 
    Vue.component('father', FATHER); 
    Vue.component("child", CHILD); 
    var vm = new Vue({ 
      data: { 
        fmsg: "data里的數(shù)據(jù)", 
        giveData: { 
          fmsg: "這是父組件里的數(shù)據(jù)" 
        } 
      }, 
      methods: {}, 
      // 局部組件fatherlocal 
      components: { 
        'fatherlocal': { 
          template: '#father-local', 
          data: function() { 
            return { 
              name: "局部-父組件", 
              data: "局部-父組件里的數(shù)據(jù)" 
            } 
          } 
        } 
      } 
    }).$mount('#app'); 
  </script> 
</body> 
</html>

6、特殊的屬性is

當(dāng)使用 DOM 作為模板時(shí) (例如，將el選項(xiàng)掛載到一個(gè)已存在的元素上)，你會(huì)受到 HTML 的一些限制，因?yàn)?Vue 只有在瀏覽器解析和標(biāo)準(zhǔn)化 HTML 后才能獲取模板內(nèi)容。尤其像這些元素<ul>，<ol>，<table>，<select>限制了能被它包裹的元素，而一些像<option>這樣的元素只能出現(xiàn)在某些其它元素內(nèi)部。

自定義組件<my-row>被認(rèn)為是無效的內(nèi)容，因此在渲染的時(shí)候會(huì)導(dǎo)致錯(cuò)誤。變通的方案是使用特殊的is屬性：

<body>  
  <div id="app1">  
    <ul>   
      <li is="my-component"></li>  
    </ul>  
  </div>  
  <script>  
    Vue.component("my-component",{   
      template:"<h1>{{message}}</h1>",   
      data:function(){    
        return {     
          message:"hello world"    
        }   
      }  
    });  
    new Vue({   
      el:"#app1"  
      })  
  </script>  
</body>

總結(jié)

以上所述是小編給大家介紹的Vue全局組件與局部組件的區(qū)別，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: