終於踏入Javascript框架之Vue..(6)Props, emit

props

組件之間傳遞數據-用props(屬性)

只能從父->子，子組件也無法修改數據

最普遍的方式用array,以字串的形式放到Child組件內

props:["name","data","address"]

Props可以是各種類型，要指定類型的時候可以使用

//寫法1(多種屬性判斷)
props:{
    name:{
        type:String,
        required: true},
    number:{
        type:Number,
        default:0
//默認值
            }
       }

//寫法2
props:{
name:String,
age:[Number, String],  
//支援多種類型
}

如果沒有符合類型會發出警告，但依然可以顯示。如果要強制類型的話加上

required:true

default()=>當要繼承的項目沒有指派的時候,頁面的預設內容

可以用v-for方式呈現迴圈

//Parent.vue
  
<template>
...
<Child v-for="result in results" :name="result.name" :mail="result.mail />
<Child v-for="result in results" v-bind="result" />
//上面的寫法更簡略，如果名稱沒有對應到就不會顯示出來
...
<script>
..
    results: [
        {
          "id": "2345",
          "name": "kelly",
          "mail": "kelly@mail.com",
        },
        {
          "id": "1309",
          "name": "mark",
          "mail": "mark@mail.com",
        },
        {
          "id": "3882",
          "name": "jenny",
          "mail": "jenny@mail.com",
        },
      ],

</script>

//Child.vue
<template>
<p>{{name}}</p>
<p>{{mail}}</p>
</template>

<script>
...
  props: ['name','mail].

emit:子傳父

$emit

parent:

<child @ChildEventhandle="ParentEvent"/>

child:

<button @click="ChildEventhandle"></button>

emits:[]

method:{

ChildEventhandle() {

this.$emit...}

}

Attributes

只有一個根目錄的情況下會繼承Parent屬性內容

如果不想使用的話

<export default {

...inheritAttrs:false

}