组件通信props的使用！！！

最新推荐文章于 2024-05-27 23:47:22 发布

奔跑的蜗牛run

最新推荐文章于 2024-05-27 23:47:22 发布

阅读量237

点赞数 2

分类专栏： vue文章文章标签： javascript vue.js es6 html

本文链接：https://blog.csdn.net/qq_46623655/article/details/116781904

版权

vue文章专栏收录该内容

5 篇文章 0 订阅

订阅专栏

二刷父子组件通信props

子组件不能直接获取父组件中的数据，因此需要利用别的途径
在这里插入图片描述

在这里插入图片描述
子组件

vue也相当于组件，并且是所有组件的父组件，这里就将vue看作父组件

运行结果

根据上几张图片，很清楚的看出父组件中data数据传到了props中，且利用了v-bind语法糖动态绑定，props里面的数据也可以是对象，比如

 			props: {
                cInfo: {
                    type: Object,
                    //如果是对象 default就是函数，返回一个对象
                    default () {
                        return {}
                    },
                },
                childMyMessage: {
                    type: String,
                    default: '我是默认值'
                }
            },

附件：源代码

<body>
    <div id="app">
        <cpn :smessage='message' :smovies='movies'></cpn>
    </div>

    <template id='cpnC'>
        <div>
            <ul>
                <li v-for="item in smovies">{{item}}</li>
            </ul>
            <h5>{{smessage}}</h5>
        </div>
    </template>


    <script>
        // 父传子
        let cpn = {
            template: '#cpnC',
            // props: ['smovies', 'smessage'], //3.变量的数组写法
            props: { //变量的对象写法
                //1.类型限制
                // smovies: Array,
                // smessage: String,

                // 2. 提供一些默认值
                smovies: {
                    type: Array,
                    default: [], //并没有报错

                },
                smessage: {
                    type: String,
                    required: true,
                    default: '测试'
                },
            },
        };
        //相当于父组件，根组件
        let app = new Vue({
            el: '#app',
            data: {
                movies: ['嗨', '你好', '!!!'],
                message: '你好啊',
            },
            methods: {},
            components: {
                cpn, //字面量的增强写法
            }
        });
    </script>
</body>

前端新手小白上路，欢迎各位大佬共同交流学习前端内容！！😊

奔跑的蜗牛run

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
组件通信props的使用！！！

二刷父子组件通信props子组件不能直接获取父组件中的数据，因此需要利用别的途径子组件vue也相当于组件，并且是所有组件的父组件，这里就将vue看作父组件运行结果根据上几张图片，很清楚的看出父组件中data数据传到了props中，且利用了v-bind语法糖动态绑定，props里面的数据也可以是对象，比如 props: { cInfo: { type: Object, /
复制链接

扫一扫