父子组件传值:
1.父组件中定义值
2.在父组件中调用、注册、引用子组件
调用:
注册:
引用:
3.把父组件的值绑到子组件上
注意:
但是注意要用v-bind:绑定要传的值,不用v-bind直接把值放到标签上,会被当成html的节点属性解析的。
4.自组件内部接受父组件传过来的值:prop()
但是要有注意的点:
子组件接受父组件的值分为———引用类型和普通类型两种,
普通类型:字符串、数字、布尔值、空
引用类型:数组、对象
其中,普通类型是可以在子组件中更改,不会影响其他兄弟自组件内同样调用的来自父组件的值,
但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果是:其他同样引用了改值的自组件内部的值也会跟着被修改。
普通类型的数据修改之后的警告:
警告:避免直接对一个道具进行修改,因为当父组件重新呈现时,该值将被覆盖。相反,使用基于支柱的数据或计算属性。
子组件向父组件传值
this.$emit(event,...args);/** event: 要触发的事件* args: 将要传给父组件的参数*/
子组件
父组件:
参考文档
https://www.cnblogs.com/padding1015/