码迷,mamicode.com
首页 > 其他好文 > 详细

vue2中component父子组件传递数据props的使用

时间:2017-07-14 22:09:09      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:修改   span   不能   port   one   eth   turn   组件   数据   

子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项。

组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据。修改父亲传过来的props数据的时候 父亲必须传递对象,否则不能修改。

现在是传递对象的语法 app.vue(父组件):

<style scoped lang=‘stylus‘>

</style>
<template>
    <div>
        <h1>我是app组件</h1>
        <zujian :data="data"></zujian>
    </div>
</template>
<script>
    import zujian from ‘./components/zujian.vue‘
    export default{
        data(){
            return{
                data:{
                    a:1
                }
            }
        },
        components:{
            zujian
        }
    }
</script>

zujian.vue(子组件):

<template>
    <div>
        <h1>{{data.a}}</h1>
        <button @click="jia">+</button>
    </div>
</template>
<script>
    export default{
        props:["data"], // 父亲传 谁用谁接受(儿子接受)
        data(){
            return{
                 
            }
        },
        methods:{
            jia(){
                console.log(this.data);
                this.data.a++;
            }
        }
    }
</script>

 

vue2中component父子组件传递数据props的使用

标签:修改   span   不能   port   one   eth   turn   组件   数据   

原文地址:http://www.cnblogs.com/lxy1123/p/7172255.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!