Vue-父子组件传值

最新推荐文章于 2025-02-21 11:21:34 发布

MrLss

最新推荐文章于 2025-02-21 11:21:34 发布

阅读量385

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/MrLsss/article/details/109407226

版权

vue 专栏收录该内容

23 篇文章

订阅专栏

一、父组件向子组件传值通过属性props 因为父组件在模板中或者控制的区域要使用子组件，可通过属性直接赋值

1.在子组件中声明props 属性定义要接收数据的属性名称
2.父组件在使用子组件标签时通过动态绑定对应的属性进行赋值(传值)
3.那么在子组件中模板内可以随便使用该属性，使用方式和Data中的变量数据一样！

△△△:定义props属性的时候可以使用[]数组形式定义[‘msg’,‘arr’]，也可以使用对象形式{ msg:String }对象形式可以进行“类型约束” 还有一种属性名再对应一个对象进行更多的约束扩展props: { msg: { type:String,default:"–",validator:function(value){ }… } }

☆:Vue组件注册在什么地方，什么地方就是它的父组件。 const a=vueExtend({}) 组件构造器a 被注册到了 Vue实例中那么Vue实例就是a的父组件，a就是子组件。父组件在使用a组件标签的时候就可以通过属性的方式进行传值

props: {
    // fooA只接受数值类型的参数
    fooA: Number,
    // fooB可以接受字符串和数值类型的参数
    fooB: [String, Number],
    // fooC可以接受字符串类型的参数，并且这个参数必须传入
    fooC: {
        type: String,
        required: true
    },
    // fooD接受数值类型的参数，如果不传入的话默认就是100
    fooD: {
        type: Number,
        default: 100
    },
    // fooE接受对象类型的参数
    fooE: {
        type: Object,
        // 当为对象类型设置默认值时必须使用函数返回
        default: function(){
            return { message: 'Hello, world' }
        }
    },
    // fooF使用一个自定义的验证器
    fooF: {
        validator: function(value){
            return value>=0 && value<=100;
        }
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../JS/vue.js"></script>
</head>

<body>
    <!-- 被vm 实例所控制的区域 -->
    <div id="app">
        <!-- <cpn :cmessage="message"></cpn> -->

        <cpn :cmessage="message"></cpn>
        <cpn :cmovies="movices"></cpn>
        <cpn :msg="num"></cpn>
    </div>

    <template id="cpn">
        <div>
            <p>{{cmessage}}</p>
            <!-- 在子组件中绑定了父组件中的数据 -->
            <ul v-for="item in cmovies">
                <li>{{item}}</li>
            </ul>
            <p>{{msg}}</p>
        </div>
    </template>
    <script>

        //创建一个子组件 
        const cpn = Vue.extend({
            template: "#cpn",
            data() {
                return {

                }
            },
            methods: {

            },
            //1.通过数组声明  父组件要传来属性的名称
            // props:["cmessage"]

            //2.通过对象的形式声明属性列表 （做类型约束）
            // props:{
            //     cmessage:String 
            // }

            //3.对象形式对属性名称进一步“约束扩展”
            props: {
                cmessage: {
                    type: String,
                    default: "--",
                    //父组件必须对我这个属性传值
                    require: false
                },
                cmovies: {
                    //object 和  Array  类型的默认值需要从工厂函数中设置  也就是 在函数内部返回
                    type: Array,
                    default() {
                        return ["电影1", "电影2"]
                    }
                },
                msg: {
                    type:Number,
                    //return true  正常显示
                    validator: function (value) {
                        return value >= 0 && value <= 100;
                        // return true  不校验 直接显示
                    }
                }
            }
        })



        // 创建实例对象(根组件) 
        //父组件向子组件传值 通过属性props  因为父组件在模板中或者控制的区域 要使用子组件<cpn prop=" ... "></cpn>通过属性  直接赋值 
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {
                message: "sdwm",
                movices: ["战狼二", "绝地逃亡", "宝贝计划", "百变星君"],
                num:150
            },
            methods: {},
            components: {
                cpn
            }
        });
    </script>
</body>

</html>