父组件向子组件传值

最新推荐文章于 2024-03-06 17:47:03 发布

没人看的垃圾博客

最新推荐文章于 2024-03-06 17:47:03 发布

阅读量121

点赞数

分类专栏： vue学习笔记前端面试笔记文章标签： vue.js

本文链接：https://blog.csdn.net/jiwei_1234____5/article/details/103845060

版权

前端面试笔记同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

vue学习笔记

2 篇文章 0 订阅

订阅专栏

先在父组件中的子组件标签中绑定值<Child :data1='msg'/>
在子组件中使用props接受参数列表 props:["data1"]
然后就可以在子组件中任意使用了

看不太懂？算了，直接看代码吧

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>
</head>
<body>
    <div id="app">
    
    </div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
<script type="text/javascript">
    
    var Child={
        template:'<h1>我是子组件 <span :style="childData.style">{{childData.msg1}}</span> </h1>',
        props:["childData"]
    };
    
    var APP={
        template:"<div> <Child :childData='msg'  /> </div>"
        ,
        data()
        {
            return{
                msg:{
                    msg1:"消息1",

                    style:"color:red",


                }
            }
        }
        ,
        components:{
            Child
        }
    };

    new Vue({
        el: "#app"
        ,
        template:'<APP/>'
        ,
        components:{
            APP,
        },
        methods:{

        }
    })
</script>
</html>

没人看的垃圾博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父组件向子组件传值

先在父组件中的子组件标签中绑定值<Child :data1='msg'/>在子组件中使用props接受参数列表 props:["data1"]然后就可以在子组件中任意使用了看不太懂？算了，直接看代码吧 <!DOCTYPE html><html><head> <meta charset="UTF-8"> &l...
复制链接

扫一扫