vue的父子組件間的相互傳參props及props數據的多種驗證機制

感覺自己即將完全步入前端大軍，后台老板都不需要我弄了，塞翁失馬。。。時間會告訴我們是好是壞

好了言歸正傳，最近vue是搞的不亦樂乎啊，下面來總結一下vue組件間的各種使用方法以及一些技巧

----------------------------------------------------------------------

1.父組件如何向子組件傳參數

<div id="app">
    <!-- 傳遞靜態值 --這里firstBlood為什么要寫成first-blood上一篇已經說明 -->
    <son-demo first-blood="參數值"></son-demo>
    <!-- 傳遞動態值  -->
    <son-demo :first-blood="giveSon"></son-demo>
    <!-- 如果要直接傳遞Boolean值 --這里的true會被直接解析成true而不是字符串 -->
    <son-demo :first-blood="true"></son-demo>
</div>

<script type="text/x-template" id="sonModel">
    <h1>{{firstBlood}}</h1>
</script>

<script>
    //定義子組件
    var sonDemo = {
        template: "#sonModel",
        props:['firstBlood'],
        data(){
            return {};
        },
    }
    //父組件
    new Vue({
        el: '#app',
        components: {
            sonDemo    //也可以這樣寫  sonDemo: sonDemo
        },
        data: {
            giveSon:'給兒子的值'
        }
    });
</script>
注意：vue不推薦直接在子組件中修改父組件傳來的props的值，會報錯

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "" (found in component )

如果要修改,在子組件里定義一個新變量來接收↓

data(){

return {
     getFirstBlood: this.firstBlood    //通過data, 定義新變量getFirstBlood, 這樣getFirstBlood的值變更時，不會影響父組件傳來的firstBlood的值
}

}

還有如果傳遞的參數是數組類型的話，子組件是可以直接對其進行操作的，同時父組件里的數組也會跟着變，如果不想污染初始值最好還是新定義一個變量接收

2.父組件向子組件傳值時對傳遞的參數進行類型驗證，如果沒傳給個默認值

type 可以是下列原生構造函數中的一個：String、Number、Boolean、Array、Object、Date、Function、Symbol

<div id="app">
    <!-- 傳遞動態值  -->
    <son-demo :show-or-del="isshow" :first-blood="giveSon"></son-demo>
</div>

<script type="text/x-template" id="sonModel">
    <h2 v-if="showOrDel"></h2>
    <h1>{{firstBlood}}</h1>
</script>

<script>
    //定義子組件
    var sonDemo = {
        template: "#sonModel",
        props: {
            showOrDel: {
                type: [Boolean, Number],
                required: true
            },
            firstBlood: {
                type: String,
                required: '默認值'
            }
        },
        data(){
            return {};
        },
    }
    //父組件
    new Vue({
        el: '#app',
        components: {
            sonDemo    //也可以這樣寫  sonDemo: sonDemo
        },
        data: {
            isshow: false,
            giveSon:'給兒子的值'
        }
    });
</script>

 

3.子組件如何向父組件傳遞參數   關鍵詞$emit

<div id="app">
    <son-demo @giveFatherInfo="getSonInfo"></son-demo>
</div>

<script type="text/x-template" id="sonModel">
    <button @click="giveDad">點擊給父親傳值</button>
</script>

<script>
    //定義子組件
    var sonDemo = {
        template: "#sonModel",
        data(){
            return {
                idValue:'123445'
            };
        },
        methods: {
            giveDad(){
                this.$emit('giveFatherInfo', this.idValue);
            }
        }
    }
    //父組件
    new Vue({
        el: '#app',
        components: {
            sonDemo    //也可以這樣寫  sonDemo: sonDemo
        },
        data: {
            userid: ''
        },
        methods: {
            getSonInfo(v) {
                 this.userid = v;
            },
        },
    });
</script>

 

 歡迎大家來討論技術，相互學習😁