Vue組件之全局組件與局部組件的使用詳解

時間 2019-11-21

標籤 vue 組件全局局部使用詳解简体版

原文原文鏈接

　　組件 (Component) 是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以is特性擴展。我的認爲就是一個能夠重複利用的結構層代碼片斷。html

　　全局組件註冊方式：Vue.component(組件名,{方法})es6

<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
  <my-component></my-component>
 
</div>
<script>
Vue.component("my-component",{
  template:"<h1>我是全局組件</h1>"
});
new Vue({
  el:"#app"
});
new Vue({
  el:"#app1"
})
</script>
</body>

渲染結果：小程序

<div id="app">
  <h1>我是全局組件</h1>
</div>
<div id="app1">
  <h1>我是全局組件</h1>
</div>

這裏須要注意：瀏覽器

1.全局組件必須寫在Vue實例建立以前，纔在該根元素下面生效；app

eg:函數

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

這樣只會渲染app1根元素下面的，並不會渲染app根元素下面的，而且會報錯。this

2.模板裏面第一級只能有一個標籤，不能並行；es5

<body>
<div id="app">
  <my-component></my-component>
</div>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局組件</h1>" +
    "<p>我是全局組件內標籤</p>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

這樣子會報錯，而且只會渲染第一個標籤h1;咱們應該這樣子寫：spa

<body>
<div id="app">
  <my-component></my-component>
</div>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局組件<p>" +
    "我是全局組件內標籤</p></h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

局部組件註冊方式，直接在Vue實例裏面註冊.net

eg:

<body>
<div id="app1">
  <child-component></child-component>
</div>
<script>
  new Vue({
    el: "#app1",
    components:{
      "child-component":{
        template:"<h1>我是局部組件</h1>"
      }
    }
  });

局部組件須要注意：

1.屬性名爲components，s千萬別忘了;

2.套路比較深，因此建議模板定義在一個全局變量裏，代碼看起來容易一點，以下：（模板標籤比較多的時候，這樣子寫更加簡潔規整）

<body>
<div id="app1">
  <child-component></child-component>
</div>
<script>
  var child={
    template:"<h1>我是局部組件</h1>"
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  });
</script>
</body>

關於組件中的其餘屬性，能夠和實例中的同樣，可是data屬性必須是一個函數：

eg:

<body>
<div id="app1">
  <child-component></child-component>
</div>
<script>
  var child={
    template:"<button @click='add2'>我是局部組件:{{m2}}</button>",
    data:function(){
      return {m2:1}
    },
    methods:{
      add2:function(){
        this.m2++
      }
    }
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  })
</script>
</body>

顯示結果：

全局組件和局部組件同樣，data也必須是一個函數：

<body>
<div id="app1">
  <my-component></my-component>
</div>
<script>
  Vue.component("my-component",{
    template:"<button @click='add1'>全局組件：{{m1}}</button>",
    data:function(){
      return {
        m1:10
      }
    },
    methods:{
      add1:function(){
        this.m1++
      }
    }
  });
  new Vue({
    el:"#app1"
  })
</script>
</body>

顯示結果：

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

自定義組件<my-row>被認爲是無效的內容，所以在渲染的時候會致使錯誤。變通的方案是使用特殊的is屬性：

eg:

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

渲染結果爲：

對於全局與局部的做用域問題，咱們能夠這樣理解，只要變量是在組件內部用的，這些變量必須是組件內部的，而在外部html結構中引用的變量，都引用的是該掛載下的實例裏面的變量

eg:

<body>
<div id="app1">
<my-component></my-component>
</div>
<script>
 Vue.component("my-component",{
   template:"<button @click='add3'>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   },
   methods:{
     add3:function(){
       alert("我是局部")
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>

彈出框顯示：我是局部

Vue中所謂的全局指的是該掛載下的區域；

下面這種作法是錯誤的，按個人想法以爲應該會彈出：我是全局，可是卻報錯，也就是說組件處於全局下不能夠添加默認事件，要用全局的事件函數，必須父子通訊

<body>
<div id="app1">
<my-component @click="add3"></my-component>
</div>
<script>
 Vue.component("my-component",{
   template:"<button @click='add3'>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>

額外話題：

1.函數return後面必須跟返回的內容，不能換行寫

eg:

下面這種寫法不會返值回來：

2.Vue和小程序等同樣，採用es6的函數寫法，this指向是不同的

<body>
<div id="app1">
  <button @click="f">ES5</button>
  <button @click="f1">ES6</button>
</div>
<script>
new Vue({
  el:"#app1",
  methods:{
    f:function(){
     console.log(this)
    },
    f1:()=>{
      console.log(this)
    }
  }
})
</script>
</body>

結果：

第一個this指的是Vue實例

第二個this指的是Window

因爲它和小程序不同，我發如今data裏面this指的是window，在methods裏面this纔是Vue實例

因此建議你們用es5寫吧

new Vue({
  el:"#app1",
  data:{that:this},
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。