vue子组件获取父组件的内容（props属性）

最新推荐文章于 2024-10-03 23:24:09 发布

Queen_zdd

最新推荐文章于 2024-10-03 23:24:09 发布

阅读量1.3w

点赞数

本文链接：https://blog.csdn.net/queen_zdd/article/details/78373571

版权

本文介绍了在Vue.js中如何使用props属性将数据从父组件传递到子组件。子组件由于其作用域的孤立性，无法直接访问父组件的数据。通过props，可以实现父子组件间的数据通信。

摘要由CSDN通过智能技术生成

props属性

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
想要引用父组件需要：

<bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的数据msg绑定到myMsg上
bbb:{
    props：{
        'myMsg':String  //绑定数据的类型
    }
}
注：props也可表达成如下：props：['myMsg']

完整实例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="example">
    <aaa></aaa>
</div>
<template id="aaa">
    <h1>{{msg}}</h1>       //父组件
    <bbb :my-msg="msg"></bbb> //子组件
</template>
<script>
    window.onload=function(){
        new Vue({
            el: '#example',
                 data:{
                     },
            components:{
                aaa:{
                    data:function(){
                        return{
                            msg:'我是父组件的数据'
                        }
                     },
                    template:'#aaa',
                    components:{
                        bbb:{
                            props:{
                                'myMsg':String
                            },
                            template:'<h2>我是子组件-->{{myMsg}}</h2>'
                        }//当html中使用my-msg时，在js中需使用驼峰命名myMsg

                    }
                }

            }
    })
    }
</script>
</body>
</html>

最后的结果如下图：
这里写图片描述