亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 29
粉絲 1
評論 0
訪問量 43614
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
組件基礎(chǔ)與組件之間的通信
祥子弟弟
原創(chuàng)
983人瀏覽過

一、組件知識

組件，從形式上看，組件就是一個自定義的 html 標(biāo)簽;組件本質(zhì)上來看是一個可復(fù)用的 Vue 實例，是構(gòu)造函數(shù) Vue 的一個子類;組件實現(xiàn)了代碼復(fù)用。從組件的層面上來理解，Vue 的掛載點就是一個組件，不過它是一個隱式聲明根組件。

創(chuàng)建一個組件需要進(jìn)行兩個步驟

  1. 創(chuàng)建組件,定義一個名字為child-component的新組件（使用 Vue.component 創(chuàng)建的組件為全局組件）
  1. <!-- 創(chuàng)建一個新組件 -->
  2. <script>
  3.   Vue.component("child-component", {
  4.     template: `<h1>Helo World</h1>`,
  5.     data() {
  6.       return {};
  7.     },
  8.   });
  9. </script>

其中 “child-component” 是創(chuàng)建的組件的名字（用戶自定義的 html 標(biāo)簽），后邊的對象{}中的內(nèi)容是組件的配置項，其中 template 中的內(nèi)容是一個字符串模板，作為 Vue 實例的標(biāo)識使用。模板將會替換掛載的元素，也就是掛載點上的<child-component></child-component>這一對自定義 html 標(biāo)簽。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā)插槽。由于組件是一個 Vue 的子類，所以它的屬性也是由一個函數(shù)data(){return{}}返回一個對象來實現(xiàn)的。

2.掛載，將自定義的 html 標(biāo)簽放到 Vue 掛載點的子結(jié)點上

  1. <body>
  2.   <!-- 掛載點是一個隱式聲明根組件， -->
  3.   <div class="app">
  4.     <!-- 自定義html標(biāo)簽 -->
  5.     <child-component></child-component>
  6.   </div>
  7.   <script>
  8.     // 將組件名放到掛載點的子結(jié)點中
  10.     const vm = new Vue({
  11.       el: ".app",
  12.       data() {
  13.         return {};
  14.       },
  15.     });
  16.   </script>
  17. </body>

聲明組件的目的就是實現(xiàn)代碼復(fù)用，將這個組件可以重復(fù)的放置在已經(jīng)掛載好的根節(jié)點中

例如

  1. <body>
  2.   <!-- 掛載點是一個隱式聲明根組件， -->
  3.   <div class="app">
  4.     <!-- 自定義html標(biāo)簽 -->
  5.     <child-component></child-component>
  6.     <child-component></child-component>
  7.     <child-component></child-component>
  8.   </div>
  9. </body>


上述示例中，組件的創(chuàng)建是通過Vue.component來實現(xiàn)的。這樣聲明的組件是全局組件，它在全局可見，聲明在 Vue 實例外部，全局組件可以在多個 Vue 實例中共享，不過盡可能不要去聲明一個全局組件，減少全局污染。因為通常一個項目只有一個 Vue 實例，所以盡可能不要用全局組件，而應(yīng)該使用局部組件代替。

局部組件的聲明
局部組件是屬于 Vue 實例的，使用 components 聲明。

  1. <body>
  2.   <div class="app">
  3.     <child-hello></child-hello>
  4.   </div>
  5.   <script>
  6.     const vm = new Vue({
  7.       el: ".app",
  9.       data() {
  10.         return {};
  11.       },
  12.       // 聲明一個局部組件
  13.       components: {
  14.       childHello: {
  15.       template: `<p>Hello {{site}}</p>`,
  16.       data() {
  17.         return {
  18.           site: "php中文網(wǎng)",
  19.         };
  20.       },
  21.       },
  22.     });
  23.   </script>
  24. </body>

<child-hello></child-hello>，是定義的局部組件。但是在 dom 結(jié)構(gòu)中是找不到的。

二、組件之間的通信

父組件向子組件傳參

父組件是通過自定義屬性的方式將參數(shù)傳到子組件中的, 然后子組件中用固定屬性名稱 props 來接收父組件自定義的屬性名。

現(xiàn)在我們來聲明一個子組件，將其放到掛載點下，然后在子組件中不進(jìn)行屬性聲明，所有的屬性在父組件中聲明定義，然后試著將這些父組件中的屬性傳遞到子組件中。

  1. <body>
  2.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  3.   <div id="app">
  4.     <!-- 父組件，父組件是通過自定義屬性的方式將參數(shù)傳到子組件中的 -->
  5.     <btn-inc :user-name="username" :parent-count="count"></btn-inc>
  6.     <p>{{count}}</p>
  7.   </div>
  8.   <script>
  9.     const vm = new Vue({
  10.       el: "#app",
  11.       data() {
  12.         return {
  13.           username: "父組件的變量",
  14.           count: 0,
  15.         };
  16.       },
  17.       // 局部組件
  18.       components: {
  19.         btnInc: {
  20.           // 使用固定屬性名稱props來接收父組件自定義的屬性名
  21.           props: ["userName", "parentCount"],
  23.           // 組件之間的數(shù)據(jù)傳遞是單向的，不允許在子組件中更新父組件中的數(shù)據(jù)
  24.           template: `<div>
  25.                 <button @click="num++">點贊：+ {{num}}</button>
  26.                 <span>{{userName}}</span>
  27.                 </div>`,
  28.           data() {
  29.             return {
  30.               num: this.parentCount,
  31.             };
  32.           },
  33.         },
  34.       },
  35.     });
  37.     // 子組件中的數(shù)據(jù)變化更新父組件的數(shù)據(jù),通過消息傳遞（事件）實現(xiàn)
  38.     console.log(vm.count);
  39.   </script>
  40. </body>

父組件中的自定義屬性的值可以來自根組件的 data,不過如果使用根組件上的變量就要對自定義屬性進(jìn)行 v-bind 綁定，父組件中的自定義屬性名盡量寫成”:user-name”，而在子組件中接收的時候應(yīng)該寫成”userName”的形式。

試著直接使用父組件data中的count直接使用在子組件的template，會發(fā)現(xiàn)根本就不可以進(jìn)行渲染，根本就識別不出來。只能通過父組件自定義屬性綁定到父組件上，然后再傳參才可以在子組件中拿到父組件中的數(shù)據(jù)。而且父組件中的數(shù)據(jù)拿過來之后，也就是通過props獲取到之后，不能對其進(jìn)行修改，如果想要進(jìn)行改變值的操作，就只能在子組件的data中重新定義一個變量接收，然后對這個變量進(jìn)行修改，如果不這樣做，Vue 就會報錯。

在子組件的template中直接使用父組件的屬性進(jìn)行修改，會出現(xiàn)如下報錯情況。

template: <div> <button @click="parentCount++">點贊：+ {{parentCount}}</button> <span>{{userName}}</span> </div>,

報錯情況

而且改變之后，對于父組件中的 count 是沒有影響的。

子組件向父組件傳參

子組件中的數(shù)據(jù)變化更新父組件的數(shù)據(jù),通過消息傳遞（事件）實現(xiàn),子組件向父組件傳參是通過聲明同名事件來實現(xiàn)的。
在子組件的templatehtml 字符串中定義事件，必須對事件使用$emit()事件方法，$emit(父組件中要使用的方法名稱,子組件要傳給父組件的值)。

現(xiàn)在來列舉一個子組件向父組件傳參的例子

  1. <body>
  2.   <div id="app">
  3.     <btn-inc
  4.       :user-name="username"
  5.       :parent-count="count"
  6.       @click-count="handle"
  7.     ></btn-inc>
  8.   </div>
  9.   <script>
  10.     const vm = new Vue({
  11.       el: "#app",
  12.       data() {
  13.         return {
  14.           username: "父組件的變量",
  15.           count: 0,
  16.         };
  17.       },
  18.       // 局部組件
  19.       components: {
  20.         btnInc: {
  21.           // 使用固定屬性名稱props來接收父組件自定義的屬性名
  22.           props: ["userName", "parentCount"],
  24.           // 必須使用$emit()事件方法
  25.           // $emit(父組件中要使用的方法名稱,子組件要傳給父組件的值)
  26.           template: `<div>
  27.                   <button @click="$emit('click-count',num)">點贊：+ {{parentCount}}</button>
  28.                   <span>{{userName}}</span>
  29.                   </div>`,
  30.           data() {
  31.             return {
  32.               num: 1,
  33.             };
  34.           },
  35.         },
  36.       },
  38.       // 父組件更新數(shù)據(jù)的方法
  39.       methods: {
  40.         handle(value) {
  41.           console.log(this.count);
  42.           this.count += value;
  43.         },
  44.       },
  45.     });
  46.   </script>
  47. </body>

父組件中通過定義同名事件，來對子組件中的數(shù)據(jù)進(jìn)行接收，另外，這個子組件傳遞的參數(shù)可以是任何類型。

總結(jié)：

  1. 父組件向子組件傳參：通過自定義屬性
  2. 子組件向父組件傳參：通過自定義方法
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)