Vue中父组件向子组件传值

Vue中父组件向子组件传值

相关Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.4.0.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <!--父组件可以在引用子组件的时候,通过属性绑定的形式(v-bind:),-->
    <!--把需要传递给子组件的数据,以属性绑定的形式传递到子组件中 给子组件使用-->
    <com1 v-bind:parentmsg="msg"></com1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'123-父组件中的数据'
        },
        components: {
//            注意:子组件中的data数据是子组件私有的
            data:function () {
                return{
                    title:'123'
                }
            },
            //发现子组件中默认无法访问到父组件的data的数据和methods中的方法
            com1: {
                template:'<h1>这个是子组件---{{parentmsg}}</h1>',
                //注意:组建中的所有props中的数据都是通过父组件传递给子组件的
                //注意:通过props传过来的数据都是只读的 而data中的数据是可读可写的
                props:['parentmsg']//吧父组件传递过来的parentmsg属性先在props中定义,这样才能使用数组
            }
        }
    });

</script>

</body>
</html>
posted @ 2018-11-03 15:07  城南少年与猫  阅读(318)  评论(0)  编辑  收藏  举报