技術標籤：vuevue

目錄

• 1.父傳子
• • 1.1 父元件傳值
  • 1.2 子元件接收值（Props）
  • • 1.2.1 Props屬性名
    • 1.2.2 Props屬性值
• 2.子傳父
• • 2.1 父元件自定義事件
  • 2.2 子元件觸發事件並傳遞資料

1.父傳子

1.1 父元件傳值

在父元件中，通過在子元件上新增屬性，向子元件傳遞資料。

• 屬性
  • 屬性名
    • 命名規範：小寫字母，單詞以短橫線-分隔。例如：my-attr
  • 屬性值
    • 靜態：直接賦值，預設為字串型別。例如：<child post-msg="hello"></child>
      其他靜態型別賦值方法，請參考：Vue官方文件 Prop
    • 動態：v-bind或其語法糖 :賦值變數。例如：<child :post-msg="msg"></child>

1.2 子元件接收值（Props）

子元件通過props接收父元件傳遞的資料。

1.2.1 Props屬性名

props接收的屬性名使用駝峰式命名。例如：myAttr。

props接收的屬性名與父元件中以短橫線分隔命名法的屬性名一一對應。

例如：父元件在子元件上新增屬性post-msg，子元件props通過屬性名為postMsg接收。

1.2.2 Props屬性值

（1）陣列：每個元素代表一個父元素傳遞的屬性名稱。

實踐一下

• 父元件：

<child :post-msg="msg" :count="123" size="small"></child>

• 子元件：

props:['postMsg', 'count', 'size']

（2）物件形式：用於props 驗證

key：屬性名稱

value：（可以指定三種形式）

• 型別名：用於指定單一型別（型別建構函式名）。
• 陣列：用於指定多種型別。
• 物件：Prop 驗證
  • type屬性：指定型別
  • required屬性：是否必須傳值
  • default屬性：指定預設值

實踐一下

• 父元件：

<child :post-msg
 
="msg" :count="100" size="small"></child>

• 子元件：

props: {
    postMsg: String, 			// 指定單一型別
    count: [Number, String], 	// 指定多種型別
    size: {						// Prop 驗證
      type: String,	// 指定型別
      required: false, // 必須傳值
      default: "small", // 指定預設值
    },
    info: {  // 該屬性父元件沒有傳遞，子元件使用時，會使用其預設值
      type: Object,
      default: function () { // 指定預設值: 當型別為Array/Object時，預設值設定需要用函式返回
        return {
          name: "zhouxk1994",
          age: 18,
        };
      },
    },
  }

2.子傳父

子元件通過 $emit 觸發父元件的自定義事件來傳遞資料。

2.1 父元件自定義事件

（1）自定義事件名

與props在父子元件中的命名規範有區別。自定義事件名不需要手動在父子元件中進行駝峰式命名與短橫線分隔式命名的轉換，觸發的事件名需要完全匹配自定義事件名稱。

參考Vue官方文件的原話：

不同於元件和 prop，事件名不會被用作一個 JavaScript 變數名或 property 名，所以就沒有理由使用 camelCase 或 PascalCase 了。並且 v-on 事件監聽器在 DOM 模板中會被自動轉換為全小寫 (因為 HTML 是大小寫不敏感的)，所以 @myEvent 將會變成 @myevent——導致 myEvent 不可能被監聽到。
因此，我們推薦你始終使用 kebab-case 的事件名。

實踐一下

• 父元件：

<child @child-event="getChildData"></child>

（2）自定義事件
在父元件中通過自定義事件監聽（不要新增引數），在子元件中觸發後，就可以接收到子元件中傳遞回來的引數。

實踐一下

• 父元件：

methods:{
    getChildData(arg){ // arg即子元件傳遞的資料
      console.log(arg);
    }
  }

2.2 子元件觸發事件並傳遞資料

（1）子元件通過一定方式（按鈕點選/生命週期鉤子函式等）將資料通過$emit的方式觸發父元件的自定義事件，並且傳送資料給父元件。

實踐一下

• 子元件：

template部分：這裡使用按鈕點選來向父元件傳遞資料

<button @click="sendDataToParent">按鈕</button>

script部分

methods:{
    sendDataToParent(){
      this.$emit('child-event', '子元件訊息');
    }
  }

這樣就可以在父元件的getChildData函式的引數中接收到資料了。

（2）傳遞多個引數

方法一：直接以,隔開，傳遞多個引數。

this.$emit('child-event', 123, 'hello', true);

父元件的自定義監聽事件可以不定義過多引數，直接通過arguments獲得所有的實參。

methods:{
    getChildData(arg){
      console.log(arguments);
    }
  }

執行結果：

方法二：以陣列的形式傳遞多個引數。

this.$emit('child-event', [123, 'hello', true]);

父元件的自定義監聽事件可以通過引數得到該陣列進行操作。

methods:{
    getChildData(arg){
      console.log(arg);
    }
  }

執行結果：