Vue组件中的父子组件使用

目录

• Vue组件中的父子组件
• 父组件向子组件传值
• 子组件向父组件传值
• Vue父子组件的生命周期
• 总结

Vue组件中的父子组件

父组件向子组件传值

• 父组件通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
• 子组件需要在内部定义 props 属性。例如 props : [ ‘parentmsg’ ] 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
• 所有 props 中的数据都是通过父组件传递过来的

示例1： 

示例2：

子组件向父组件传值

子组件向父组件传值是通过方法的方式

示例：

    
    
    
{{ datamsgFormSon }}

Vue父子组件的生命周期

父子组件的生命周期是一个嵌套的过程

渲染的过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。