Vue.js之組件系統(tǒng)

番茄西紅柿發(fā)布于2019-04-23 13:11 / 2583人閱讀

vue.js既然是框架，那就不能只是簡(jiǎn)單的完成數(shù)據(jù)模板引擎的任務(wù)，它還提供了頁(yè)面布局的功能。本文詳細(xì)介紹使用vue.js進(jìn)行頁(yè)面布局的強(qiáng)大工具，vue.js組件系統(tǒng)。

Vue.js組件系統(tǒng)

每一個(gè)新技術(shù)的誕生，都是為了解決特定的問題。組件的出現(xiàn)就是為了解決頁(yè)面布局等等一系列問題。vue中的組件分為兩種，全局組件和局部組件。

組件的注冊(cè)

全局組件的注冊(cè)

通過Vue.component()創(chuàng)建一個(gè)全局組件之后，我們可以在一個(gè)通過 new Vue 創(chuàng)建的 Vue 根實(shí)例中，把這個(gè)組件作為自定義元素來使用。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="app">
    
    <global_component>global_component>
  div>
  <script>
    // 第一步，注冊(cè)
    Vue.component("global_component", {
      template: `
        <div>
            <h2>Hello Vue</h2>
        </div>
      `
    });

    new Vue({
      el: "#app",
    });
  script>
body>
html>

組件的參數(shù)

因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例,所以它們與 new Vue 接收相同的選項(xiàng)，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el這樣根實(shí)例特有的選項(xiàng)。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="app">
    
    <global_component>global_component>
  div>
  <script>
    // 第一步，注冊(cè)
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });

    new Vue({
      el: "#app",
    });
    
  script>
body>
html>

組件的復(fù)用

每個(gè)實(shí)例維護(hù)自己的一份獨(dú)立的數(shù)據(jù)。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="app">
    
    <global_component>global_component>
    <global_component>global_component>
    <global_component>global_component>
  div>
  <script>
    // 第一步，注冊(cè)
    Vue.component("global_component", {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });

    new Vue({
      el: "#app",
    });
    
  script>
body>
html>

注意當(dāng)點(diǎn)擊按鈕時(shí)，每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的 count。因?yàn)槟忝坑靡淮谓M件，就會(huì)有一個(gè)它的新實(shí)例被創(chuàng)建。

Data必須是一個(gè)函數(shù)

data必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝, 也可以寫成如下形式

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="app">
    
    <global_component>global_component>
    <global_component>global_component>
    <global_component>global_component>
  div>
  <script>
    // 第一步，注冊(cè)
    Vue.component("global_component", {
      data(){
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    });

    new Vue({
      el: "#app",
    });

  script>
body>
html>

局部組件的注冊(cè)

全局注冊(cè)往往是不夠理想的。比如，如果你使用一個(gè)像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊(cè)所有的組件意味著即便你已經(jīng)不再使用一個(gè)組件了，它仍然會(huì)被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。

全局組件始終是存在的，除非程序結(jié)束，如果組件越來越大，那么程序所占用的空間和消耗的性能就會(huì)更大。

所以我們需要局部組件。不用的時(shí)候，被垃圾回收。

局部組件的第一種使用方式

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="component-demo">
    
    
    <my-header>my-header>
  div>
  <script>
    // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型
    // 屬性與全局組件是一樣的
    let Header = {
      template: `
        <button @click="count++">{{ count }}</button>
      `,
      data() {
        return {
          count: 0
        }
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二部，需要在根實(shí)例當(dāng)中使用它
      components: {
        my-header: Header
      }
    });
  script>
body>
html>

局部組件的第二種使用方式

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
head>
<body>
  <div id="component-demo">
  div>
  <script>
    // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型
    // 屬性與全局組件是一樣的
    let Header = {
      template: `
        <button @click="count++">{{ count }}</button>
      `,
      data() {
        return {
          count: 0
        }
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二種使用方式，不會(huì)將div渲染進(jìn)DOM，以template為根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根實(shí)例當(dāng)中使用它
      components: {
        my-header: Header
      }
    });
  script>
body>
html>

對(duì)于 components 對(duì)象中的每個(gè)屬性來說，其屬性名就是自定義元素的名字，其屬性值就是這個(gè)組件的選項(xiàng)對(duì)象。

在局部組件中使用子組件

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  style>
head>
<body>
  <div id="component-demo">
  div>
  <script>
    // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型
    // 這個(gè)對(duì)象的屬性與全局組件是一樣的(除el屬性外)

    let Fcontent = {
      template: `
        <div>
          <span>這是頭條</span>

        </div>
      `
    };

    let Header = {
      template: `
        <div v-bind:class={box: isBox}>
          <button @click="count++">{{ count }}</button>
          <first-content></first-content>
        </div>
      `,
      data() {
        return {
          count: 0,
          isBox: true
        }
      },
      components: {
        first-content: Fcontent
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二種使用方式，不會(huì)將div渲染進(jìn)DOM，以template為根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根實(shí)例當(dāng)中使用它
      components: {
        my-header: Header
      }
    });
  script>
body>
html>

注:

1.注意寫組件標(biāo)簽

2.每個(gè)組件的template只識(shí)別一個(gè)作用域塊

通信

父子組件的通信

在父組件中給子組件綁定屬性,子組件通過props=["屬性名稱"]

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  style>
head>
<body>
  <div id="component-demo">
  div>
  <script>
    // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型
    // 屬性與全局組件是一樣的

    let Fcontent = {
      template: `
        <div>
          <span>這是頭條</span>
          {{ fdata }}
        </div>
      `,
      props: [fdata]
    };

    let Header = {
      template: `
        <div v-bind:class={box: isBox}>
          <button @click="count++">{{ count }}</button>
          <first-content :fdata="fathData"></first-content>
        </div>
      `,
      data() {
        return {
          count: 0,
          isBox: true,
          fathData: "我是你爸爸~~~"
        }
      },
      components: {
        first-content: Fcontent
      }
    };

    new Vue({
      el: "#component-demo",
      // 第二種使用方式，不會(huì)將div渲染進(jìn)DOM，以template為根元素
      template: `<my-header></my-header>`,
      // 第二步，需要在根實(shí)例當(dāng)中使用它
      components: {
        my-header: Header
      }
    });
  script>
body>
html>

子父組件的通信

父組件在mounted的時(shí)候，監(jiān)聽一個(gè)自定義事件。

給子組件綁定一個(gè)click事件之后，通過內(nèi)建的方法$emit在父組件上觸發(fā)一個(gè)事件，這個(gè)時(shí)間就是父組件監(jiān)聽的自定義事件。

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script src="../statics/vue.min.js">script>
  <style>
    body {
      margin: 0;
    }
    .box {
      width: 100%;
      height: 50px;
      background-color: #2aabd2;
    }

  style>
head>
<body>
  <div id="component-demo">
  div>
  <script>
    // 定義一個(gè)局部組件，其實(shí)就是一個(gè)變量，它是一個(gè)object類型
    // 屬性與全局組件是一樣的

    let Fcontent = {
      template: `
        <div>
          <button v-on:click="myClick">放大父組件字體</button>
        </div>
      `,
      methods: {
        myClick: function () {
          console.log(this);
          this.$emit(change-font
                 
                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               Vue.js
                                                                                                           然之開源系統(tǒng)
                                                                                                           vue.js 屬性
                                                                                                           vue.js自學(xué)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1541.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 740·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3986·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3816·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3873·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3809·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3907·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3584·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6197·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

Vue.js之組件系統(tǒng)

Vue.js組件系統(tǒng)

組件的注冊(cè)

全局組件的注冊(cè)

組件的參數(shù)

組件的復(fù)用

Data必須是一個(gè)函數(shù)

局部組件的注冊(cè)

在局部組件中使用子組件

通信

父子組件的通信

子父組件的通信

相關(guān)文章

**關(guān)于Vue2一些值得推薦的文章 -- 五、六月份**

**關(guān)于Vue2一些值得推薦的文章 -- 五、六月份**

Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開發(fā)（二）

利用K8S技術(shù)棧打造個(gè)人私有云（連載之：私有云客戶端打造）

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過多的解決方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

Vue.js之組件系統(tǒng)

Vue.js組件系統(tǒng)

組件的注冊(cè)

全局組件的注冊(cè)

組件的參數(shù)

組件的復(fù)用

Data必須是一個(gè)函數(shù)

局部組件的注冊(cè)

在局部組件中使用子組件

通信

父子組件的通信

子父組件的通信

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！