# :-: 子組件進行撤除操作后父組件自動刷新 > ## 1. 在父組件調用子組件的標簽頁中定義一個方法  > ## 2. 在methods中實現這個方法，在這個方法中調用該父組件的loadData()方法進行刷新  > ## 3. 在子組件中通過props來指定方法的類型  > ## 4. 在子組件撤除方法處調用該方法  ***** > ## 5. [vue組件之屬性Props](https://www.cnblogs.com/wentutu/p/10930399.html) > ### 組件的屬性和事件 > ### 父子組件之間的通信 * 父子組件之間的通信就是 props down,events up，父組件通過 屬性props向下傳遞數據給子組件，子組件通過 事件events 給父組件發送消息。 比如，子組件需要某個數據，就在內部定義一個prop屬性，然后父組件就像給html元素指定特性值一樣，把自己的data屬性傳遞給子組件的這個屬性。 而當子組件內部發生了什么事情的時候，就通過自定義事件來把這個事情涉及到的數據暴露出來，供父組件處理。 ~~~ <my-component v-bind:foo="baz" v-on:event-a="doThis(arg1,...arg2)"></my-component> ~~~ 如上代碼， * foo是組件內部定義的一個prop屬性，baz是父組件的一個data屬性， * event-a是子組件定義的一個事件，doThis是父組件的一個方法 過程就是這樣： * 父組件把baz數據通過prop傳遞給子組件的foo； * 子組件內部得到foo的值，就可以進行相應的操作； * 當子組件內部發生了一些變化，希望父組件能知道時，就利用代碼觸發event-a事件，把一些數據發送出去 * 父組件把這個事件處理器綁定為doThis方法，子組件發送的數據，就作為doThis方法的參數被傳進來 * 然后父組件就可以根據這些數據，進行相應的操作 > ### 屬性Props Vue組件通過props屬性來聲明一個自己的屬性，然后父組件就可以往里面傳遞數據。 ~~~ Vue.component('mycomponent',{ template: '<div>這是一個自定義組件,父組件傳給我的內容是：{{myMessage}}</div>', props: ['myMessage'], data () { return { message: 'hello world' } } }) ~~~ 然后調用該組件 **注意**，由于HTML特性是不區分大小寫的，所以傳遞屬性值時，myMessage應該轉換成 kebab-case (短橫線隔開式)my-message="hello"。 ~~~ <div id="app"> <mycomponent my-message="hello"></mycomponent> </div> ~~~ > ### v-bind綁定屬性值 v-bind綁定屬性值的一個特性：一般情況下，使用v-bind給元素特性(attribute)傳遞值時，Vue會將""中的內容當做一個表達式。 ~~~ //比如 <div attr="message">hello</div> ~~~ 上面這樣，div元素的attr特性值就是message。 ~~~ <div v-bind:attr="message">hello</div> ~~~ 這里的message應該是Vue實例的data的一個屬性，這樣div元素的attr特性值就是message這個屬性的值。 之所以說是一般情況，是因為class和style特性并不是這樣。用v-bind:class和class傳入正常的類名，效果是一樣的，因為對于這兩個特性，Vue采用了合并而不是替換的原則。 > ### 動態綁定特性值 根據上面，想要把父組件的屬性綁定到子組件，應該使用v-bind，這樣，父組件中數據改變時能反映到子組件。 **注意**，根據父組件傳遞給子組件的屬性類型的不同，當在子組件中更改這個屬性時，會有以下兩種情況： * 當父組件傳遞的屬性是引用類型時，在子組件中更改相應的屬性會導致父組件相應屬性的更改。 ~~~ <div id="app"> <div>這是父組件的parentArray：{{parentArray}}</div> <my-component :child-array="parentArray"></my-component> </div> <script> Vue.component('my-component', { template: ` <div>這是接收了父組件傳遞值的子組件的childArray: {{childArray}} <br> <button type="button" @click="changeArray"> 點擊我改變父元素的parentArray</button> </div>`, props: ['childArray'], data () { return { counter: 1 } }, methods: { changeArray () { this.childArray.push(this.counter++) } } }) new Vue({ el: '#app', data: { parentArray: [] } }) </script> ~~~ 點擊結果  當父組件傳遞值為基本類型時，在子組件中更改這個屬性會報錯。正確的做法是，在父組件中綁定屬性值時，加上.sync修飾符。 ~~~ <div id="app2"> <div>這是父組件的parentArray：{{parent}}</div> <my-component-sync :child.sync="parent"></my-component-sync> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> Vue.component('myComponentSync', { template: `<div>這是接收了父組件傳遞值的子組件的child: {{child}} <br> <button type="button" @click="change"> 點擊我改變父元素的parent</button> </div>`, props: ['child'], data() { return { counter: this.child } }, methods: { change() { this.counter++ this.$emit('update:child', this.counter) } } }) new Vue({ el: '#app2', data: { parent: 0 } }) </script> ~~~ 點擊結果如下圖，去掉無法改變  > ### 子組件希望對傳入的prop進行操作 一般來說，是不建議在子組件中對父組件中傳遞來的屬性進行操作的。如果真的有這種需求,可以這樣: 1. 父組件傳遞了一個基本類型值，那么可以在子組件中創建一個新的屬性，并以傳遞進來的值進行初始化，之后就可以操作這個新的屬性了 ~~~ props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } ~~~ 2. 父組件傳遞了一個引用類型值，為了避免更改父組件中相應的數據，最好是對引用類型進行復制。復雜的情況，肯定應該是深復制。 > ### 給子組件傳遞正確類型的值 同樣是上面的原因，靜態的給子組件的特性傳遞值，它都會把他當做一個字符串。 ~~~ <!-- 傳遞了一個字符串 "1" --> <comp some-prop="1"></comp> ~~~ 子組件中，特性的值是字符串 "1" 而不是 number 1。如果想傳遞正確的數值，應該使用v-bind傳遞，這樣就能把傳遞的值當做一個表達式來處理，而不是字符串。 ~~~ <!-- 傳遞實際的 number 1 --> <comp v-bind:some-prop="1"></comp> ~~~ > ### Prop驗證 我們可以給組件的props屬性添加驗證，當傳入的數據不符合要求時，Vue會發出警告。 ~~~ Vue.component('myComponent', { props: { // 基礎類型檢測 (`null` 意思是任何類型都可以) propA: Number, // 多種類型 propB: [String, Number], // 必傳且是字符串 propC: { type: String, required: true }, // 數字，有默認值 propD: { type: Number, default: 100 }, // 數組/對象的默認值應當由一個工廠函數返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定義驗證函數 propF: { validator: function (value) { return value > 10 } } } }) ~~~ type 可以是下面原生構造器： * String * Number * Boolean * Function * Object * Array * Symbol type 也可以是一個自定義構造器函數，使用 instanceof 檢測。 ~~~ // 自定義Person構造器 function Person(name, age) { this.name = name this.age = age } Vue.component('my-component', { template: `<div>名字: {{ person-prop.name }}， 年齡： {{ person-prop.age }} </div>`, props: { person-prop: { type: Person // 指定類型 } } }) new Vue({ el: '#app2', data: { person: 2 // 傳入Number類型會報錯 } }) ~~~ > ### 非Prop類型的屬性 也可以像在html標簽中添加data-開頭的自定義屬性一樣，給自定義組件添加任意的屬性。而不僅限于data-\*形式，這樣做的話，Vue會把這個屬性放在自定義組件的根元素上。一個自定義組件的模板只能有一個根元素。 > ### 覆蓋非Prop屬性 如果父組件向子組件的非prop屬性傳遞了值，那么這個值會覆蓋子組件模板中的特性。 ~~~ <div id="app3"> <my-component2 att="helloParent"></my-component2> </div> <script> Vue.component('my-component2', { template: `<div att="helloChild">子組件原有的特性被覆蓋了</div>` }) new Vue({ el: '#app3' }) </script> ~~~ 上面渲染的結果是，div的att屬性是helloParent。 注意：前面已經提到過，覆蓋原則對于class和style不適用,而是采用了合并(merge)的原則。 ~~~ <div id="app3"> <my-component2 att="helloParent" class="class2" style="color: red;"></my-component2> </div> <script> Vue.component('my-component2', { template: `<div att="helloChild" class="class1" style="background: yellow;">子組件原有的特性被覆蓋了</div>` }) new Vue({ el: '#app3' }) </script> ~~~ 上面的渲染結果是，div的類名是class1 class2，行內樣式是color:red; background:yellow;。 ***** ## 6. [Tabs 標簽頁](https://www.antdv.com/components/tabs-cn/)