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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

子组件使用父亲传过来的数据，我们需要通过子组件的 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:

                }

            }

        },

        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>