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

组件作用域

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

image

运行上面的代码，我们发现，组件 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>

image

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

源码

原文：https://www.itshutong.com/243.html