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 }