基于Vue全局組件與局部組件的區(qū)別說明

更新時間：2020年08月11日 11:14:41 作者：兵騰傲宇

這篇文章主要介紹了基于Vue全局組件與局部組件的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1、組件聲明

<!-- 全局組件模板father模板 -->
<template id="father">
  <div>
     <h3>這是{{name}}</h1>
     <div>
       <p>這是{{data}}</p>
     </div>
  </div>
</template>
var FATHER = {
  template: "#father",
  data: function() {
     return {
       name: "一個全局組件-模板-",
       data: "數(shù)據(jù)：18892087118"
     }
   }
 };

2、組件注冊

Vue.component('father', FATHER);

3、組件掛載

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

<father></father>

4、組件實例

<!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: "一個全局組件-模板-",
          data: "數(shù)據(jù)：18892087118"
        }
      }
    };
 
    var CHILD = {
      template: "#child",
      data: function() {
        return {
          name: "子組件",
          cmsg: "子組件里的第一個數(shù)據(jù)",
          cmsgtwo: "子組件里的第二個數(shù)據(jù)"
        }
      },
      methods: {
        change: function() {
          this.fromfather.fmsg = "子組件數(shù)據(jù)被更改了"
        }
      },
      mounted: function() {
        this.cmsg = this.fromfather;
      },
      props: ["fromfather"],
    };
 
    // 注冊組件
    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

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

自定義組件<my-row>被認為是無效的內容，因此在渲染的時候會導致錯誤。變通的方案是使用特殊的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>

補充知識：Vue組件之入門：全局組件三種定義

不論我們使用哪種方式創(chuàng)建出來的組件，組件中的template屬性指向的模板內容中，必須有且只有一個根元素，其他元素必須在這個根元素下面。

1.使用Vue.extend配合Vue.component定義全局組件

在使用Vue.extend配合Vue.component定義全局組件時，Vue.extend里面定義template模板，而Vue.component里面是要注冊一個組件。

<body>
<div id="app">
 <!--第三步頁面中使用 -->
 <!-- 如果要使用組件，直接把組件的名稱以HTML標簽的形式引入到頁面中-->
 <my-compnent></my-compnent>
</div>
<script>
 //第一步：使用Vue.extend來創(chuàng)建全局組件
 var com1 = Vue.extend({
  //通過template模板的屬性來展示組件要顯示的html
  template: '<h2>使用Vue.extend創(chuàng)建全局組件</h2>'
 });
 //第二步：使用 Vue.component('組件名稱',創(chuàng)建出來的組件模板對象)
 Vue.component('myCompnent', com1);
 // 創(chuàng)建 Vue 實例，得到 ViewModel
 var vm = new Vue({
  el: '#app',
  data: {},
  methods: {}
 });
</script>
</body>

【注意】在定義注冊組件時，組件的名稱不需要按照駝峰命名，但是在頁面引入組件時，組件的名稱必須按照駝峰命名。

簡寫如下：

2.直接使用Vue.component定義全局組件

這里是直接使用Vue.component直接創(chuàng)建一個組件

<div id="app">
 <my-com2></my-com2>
</div>
<script>
 Vue.component('myCom2', {
  template: '<h2>直接使用Vue.component創(chuàng)建組件</h2>'
 });
 // 創(chuàng)建 Vue 實例，得到 ViewModel
 var vm = new Vue({
  el: '#app',
  data: {},
  methods: {}
 });
</script>

3.Vue外部直接定義template

<body>
<div id="app">
 <my-com3></my-com3>
</div>
<template id="tmp1">
 <div>
  <h2>這是通過template元素，在外部定義組件的結構，有代碼的提示和高亮</h2>
 </div>
</template>
<script>
 Vue.component('myCom3', {
  template: "#tmp1"
 });
 var vm = new Vue({
  el: '#app',
  data: {},
  methods: {}
 });
</script>
</body>