父组件调用子组件并向其传递参数demo

栗子分解

父组件father.vue调用子组件son.vue并传递一个参数给子组件title来改变其值。
主要是讲解父组件调用子组件的栗子，组件内容从简：父子组件都是一个带标题的按钮
father.vue：

<template>
<div>
    <button >{{title}}</button>
</div>
</template>
<script>
export default {
    data(){
        return{
            title:'父组件调用子组件',
        }
    },
    methods:{
        }
     }
}
</script>

son.vue：

<template>
<div>
    <button >{{title}}</button>
</div>
</template>
<script>
export default {
    data(){
        return{
            title:'子组件',
        }
    },
    methods:{
        }
     }
}
</script>

子组件使用props接受父组件传来的值、对象、参数等

子组件在props接收从父组件传过来的参数，可以传递变量，函数，对象：

<template>
<div>
    <button >{{title}}</button>
</div>
</template>
<script>
export default {
 props: ['title'],      /*props用于接收从父组件传过来的参数*/
    data(){
        return{
            title:'子组件',
        }
    },
    methods:{
        }
     }
}
</script>

父组件调用子组件并传值

<template>
<div>
    <button >{{title}}</button>
    <child1 
    :title="title" ></child1>       /*调用子组件，并传title给子组件*/
</div>
</template>
<script>
export default {
    data(){
        return{
            title:'父组件调用子组件',/*给title指定一个值*/
        }
    },
    methods:{
        }
     }
}
</script>

总结

prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中。