vue.js中的子组件与父组件，prop传递数据

组件实例的作用域是孤立的。不能在子组件的模板内直接引用父组件的数据。需要通过子组件的 props 选项显式声明子组件的数据：子组件与父组件的关系：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"

有一个王小森

2880人浏览 · 2017-07-07 16:06:47

有一个王小森 · 2017-07-07 16:06:47 发布

组件实例的作用域是孤立的。不能在子组件的模板内直接引用父组件的数据。需要通过子组件的 props 选项显式声明子组件的数据：
子组件与父组件的关系：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prop</title>
    <script src="vue.js"></script>
</head>
<body>
<!--div为父组件，child为子组件-->
<div id="app">
    {{message}}
    <child message="hi!"></child>
    <!--此处若不声明message，不会继承父组件的属性值。-->
</div>
<script>
    //先声明组件，才能使用组件。
    Vue.component('child', {
//        声明props（数组），引用父组件的message。（只是引用该属性，并没有引用属性值）
        props: ['message'],
        template: '<p>{{ message }}</p>'
    });
    new Vue({
        el: '#app',
        data: {
            message: "hello"
        }
    });
</script>
</body>
</html>

以上是自己的理解，仅供参考，若有错误与不足，欢迎指正
由于上面的实例哪一部分属于父组件，哪部分属于子组件不是太明了，可以和下面的实例想对照，这样会比较清晰一些。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prop</title>
    <script src="vue.js"></script>
</head>
<body>
<!--div#app为父组件，child为子组件-->
<div id="app">
</div>
<script>
    //先声明组件，才能使用组件。
    Vue.component('child', {
//        声明props（数组），引用父组件的message。（只是引用该属性，并没有引用属性值）
        props: ['message'],
        template: '<p>{{ message }}</p>'
    });
    new Vue({
        el: '#app',
        data: {
            message: "hello"
        },
        template:'<div>{{message}}<child message="hi!"></child></div>'
        //child为在父集中引用的子组件
    });
</script>
</body>
</html>