当前位置 > it书童 > vue > 正文

vue 通过 prop 向子组件传递数据

vue it书童 2019-10-04 20:34:11 0赞 0踩 328阅读 0评论

组件作用域

<div id="app">
    <my-component></my-component>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            // 父组件的数据
            msg: "父组件定义的数据"
        },
        components: {
            myComponent: {
                // 子组件无法直接调用父组件的数据
                template: "<h1>能不能调用父组件定义的数据?{{ msg }}</h1>"
            }
        }
    })
</script>

运行上面的代码,我们发现,组件 my-component 并不能获取实例中 data 的数据,这是因为组件与组件之间都拥有各自独立的作用域

源码

组件间传值

vue 在组件中提供了 props 选项,props 接受一个在组件中自定义属性的值;

<div id="app">
    <my-component :son_msg="msg"></my-component>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            // 父组件的数据
            msg: "父组件定义的数据"
        },
        components: {
            myComponent: {
                props: [
                    'son_msg'
                ],
                // 子组件无法直接调用父组件的数据
                template: "<h1>调用父组件的数据: {{ son_msg }}</h1>"
            }
        }
    })
</script>

视图调用组件时,将父组件的 msg 数据传递给 son_msg ,子组件接收及使用 son_msg

源码

转载须注明出处:https://www.itshutong.com/articles/243/vue-transfers-data-to-subcomponents-through-prop
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录