父子组件传值:

1.父组件中定义值

VUE组件传值

2.在父组件中调用、注册、引用子组件

调用:VUE组件传值

注册:VUE组件传值

引用:VUE组件传值

3.把父组件的值绑到子组件上

VUE组件传值

注意:

但是注意要用v-bind:绑定要传的值,不用v-bind直接把值放到标签上,会被当成html的节点属性解析的。

4.自组件内部接受父组件传过来的值:prop()

VUE组件传值

但是要有注意的点:

子组件接受父组件的值分为———引用类型和普通类型两种,

普通类型:字符串、数字、布尔值、空

引用类型:数组、对象

其中,普通类型是可以在子组件中更改,不会影响其他兄弟自组件内同样调用的来自父组件的值,

但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果是:其他同样引用了改值的自组件内部的值也会跟着被修改。

VUE组件传值VUE组件传值

普通类型的数据修改之后的警告:

警告:避免直接对一个道具进行修改,因为当父组件重新呈现时,该值将被覆盖。相反,使用基于支柱的数据或计算属性。

VUE组件传值



子组件向父组件传值

this.$emit(event,...args);/** event: 要触发的事件* args: 将要传给父组件的参数*/

子组件

VUE组件传值

父组件:

VUE组件传值

参考文档

https://www.cnblogs.com/padding1015/

VUE组件传值



相关文章: