vue3 prop

Prop是由父組件傳遞數據到子組件

1.通過props數組傳遞數據

   <div id="vm">
    <blog-t title="標題" subtitle='副標題'></blog-t>
    </div>
    <script>
        const app = Vue.createApp({});
        app.component('blog-t',{
            props:['title','subtitle'],
            template: `<h4>{{ title }}</h4><br>{{subtitle}}`
        });
        const vm = app.mount('#vm');
    </script>

 2.父向子傳遞數據

    <div id="vm">
        <button-a :title='title'></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    title:'abcd'
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

main.js 

const btn1 = {
            props:['title'],
            template: `<button>{{title}}</button>` 
        }
export {btn1}

3.為Prop指定類型

    <div id="vm">
        <blog-t title="標題" subtitle='副標題'></blog-t>
    </div>
    <script>
        const app = Vue.createApp({});
        app.component('blog-t', {
            props: {
                'title': String,
                //會警告錯誤
                'subtitle': Number
            },
            template: `<h4>{{ title }}</h4><br>{{subtitle}}`
        });
        const vm = app.mount('#vm');
    </script>

 

 4.向子組件傳遞其他類型

（1） int 類型

傳靜態數字類型：使用v-bind

    <div id="vm">
        <button-a :title='10'></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            // data() {
            //     return {
            //         title:'abcd'
            //     }
            // }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

////////////////// main.js /////////////

const btn1 = {
    props:['title'],
    template: `<button>{{ typeof title}}</button>` 
}
export {btn1}

傳動態數據類型：

    <div id="vm">
        <button-a :title='title'></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    title:10
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>


/////////////////main.js  ///////
同上

（2）bool

傳靜態數據類型： 

    <div id="vm">
        <button-a :title="true"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

傳動態

    <div id="vm">
        <button-a :title="title"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    title:true
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

 

（3）數組

靜態

   <div id="vm">
        <button-a :title="[234, 266, 273]"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

/////////////////////main.js////////////
const btn1 = {
    props:['title'],
    template: `<button>{{ title.constructor == Array}}</button>` 
}
export {btn1}

動態

    <div id="vm">
        <!--一直默認為ture-->
        <!-- <button-a title></button-a> -->
        <button-a :title="title"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    title:[234, 266, 273]
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

（4）對象

靜態

    <div id="vm">
        <button-a :title="{a:10}"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>
////////////////////main.js////////////////////

const btn1 = {

    props:['title'],

    template: `<button>{{ title.constructor == Object}}</button>` 

}

export {btn1}

動態

    <div id="vm">
        <button-a :title="title"></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    title:{a:10}
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

5.prop驗證

    <div id="vm">
        <button-a :propa='propa' :propb='propb' :propc='propc' :propf='propf' ></button-a>
    </div>
    <script type="module">
        import * as obj from './main.js'
        const app = Vue.createApp({
            data() {
                return {
                    propa: 10,
                    propb: 'bbb',
                    propc: 'ccc',
                    // prope: {
                    //     id: 1,
                    //     title: null
                    // }
                    propf:'success',
                    //propg:function(){ return 'function'}
                }
            }
        });
        app.component('button-a', obj.btn1)
        const vm = app.mount('#vm');
    </script>

main.js

const btn1 = {
    props: {
        //基礎類型檢查
        propa: Number,
        //接受多種類型
        propb: [String, Number],
        // //必填
        propc: {
            type: String,
            required: true
        },
        //帶默認值
        propd: {
            type: String,
            default: 'ddd'
        },
        //帶默認值的對象
        prope: {
            type: Object,
            default: function () {
                return { id: 10, title: 'hello' }
            }
        },
        // 自定義驗證函數
        propf:{
            validator: function(value) {
                // 這個值必須匹配下列字符串中的一個
                return ['success', 'warning', 'danger'].indexOf(value) !== -1
              }
        },
        // 具有默認值的函數
        propg:{
            type: Function,
            // 與對象或數組默認值不同，這不是一個工廠函數 —— 這是一個用作默認值的函數
            default: function() {
              return 'Default function'
            }
        }
    },
    template: `<button>{{ typeof propa }},{{propd}},{{prope.title}},{{propf}},{{propg()}}</button>`
}
export { btn1 }