Vue-父子组件传值

最新推荐文章于 2024-07-24 09:44:18 发布

MrLss

最新推荐文章于 2024-07-24 09:44:18 发布

阅读量328

点赞数

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

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

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、父组件向子组件传值通过属性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>

二、子组件通过自定义事件向父组件传值：

实现：子组件通过事件向父组件传值父组件通过在子组件标签内监听对应的事件来获取其子组件传来的数据

在这里插入图片描述

MrLss

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue-父子组件传值

一、父组件向子组件传值通过属性props 因为父组件在模板中或者控制的区域要使用子组件，可通过属性直接赋值1.在子组件中声明props 属性定义要接收数据的属性名称2.父组件在使用子组件标签时通过动态绑定对应的属性进行赋值(传值)3.那么在子组件中模板内可以随便使用该属性，使用方式和Data中的变量数据一样！△△△:定义props属性的时候可以使用[]数组形式定义[‘msg’,‘arr’]，也可以使用对象形式{ msg:String }对象形式可以进行“类型约束” 还有一种属
复制链接

扫一扫

专栏目录