组件通信-父组件向子组件传递信息

最新推荐文章于 2024-08-27 09:41:07 发布

林冰碧寒

最新推荐文章于 2024-08-27 09:41:07 发布

阅读量128

点赞数

文章标签： Vue.js 组件通信父传子 props 数据绑定

本文链接：https://blog.csdn.net/huangxinyi123/article/details/116445535

版权

组件通信
父组件向子组件传递信息
（父传子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn :c-info='info' :child-my-message='message' v-bind:class></cpn>
    </div>

    <template id="cpn">
        <div>
            <h2>{{cInfo}}</h2>
            <h2>{{childMyMessage}}</h2>
        </div>
    </template>

    <script src="./vue.js"></script>
    <script>
    	//子组件
        const cpn = {
            template:'#cpn',
            //方式一：字符串数组，数组中的字符串就是传递时的名称
            //利用props传递给父组件
            // props:['cmovies','cmessage'],
            
            //方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。
            props:{
                cInfo:{
                    type:Object,
                    default(){
                        return {}
                    }
                },
                childMyMessage:{
                    type:String,
                    default:''
                }
            }
        }

		//父组件
        const app = new Vue({
            el:'#app',
            data:{
                info:{
                    name:'bob',
                    age:18,
                    height:1.88
                },
                message:'aaaa',
            },
            components:{
                cpn
            }
        })
    </script>
</body>
</html>

林冰碧寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件通信-父组件向子组件传递信息

组件通信父组件向子组件传递信息（父传子）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bod
复制链接

扫一扫