vue中父组件向子组件传值与Vue子组件向父组件传值(this.$emit()方法)-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

vue中父组件向子组件传值与Vue子组件向父组件传值(this.$emit()方法)

[导读]:首先在以下案例中,App.vue是父组件,Second-module.vue是子组件。 总体来说,父传子就是这四个步骤:父组件的data中定义值,引入并调用子组件,在引用的子组件的标签上通过v-bind指令给子组件传...

首先在以下案例中,App.vue是父组件,Second-module.vue是子组件。

总体来说,父传子就是这四个步骤:父组件的data中定义值,引入并调用子组件,在引用的子组件的标签上通过v-bind指令给子组件传值,子组件通过在data中定义的props属性接收父组件传过来的值然后应用到子组件里。
首先,值肯定是定义在父组件中的,供所有子组件共享,所以要在父组件的data中定义值:


然后,父组件要和子组件有契合点,就是要在父组件中引入、注册、调用子组件:
引入:

注册:

调用:(父组件内在引用的子组件的标签上通过v-bind指令绑定上要传的值)


最后,子组件内部要去接收父组件传过来的值:使用props来接收

这样,子组件内部就可以直接使用父组件的值了

但是有要注意的点:
子组件接受的父组件的值分为——引用类型和普通类型两种,
普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)
引用类型:数组(Array)、对象(Object)
其中,普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,
但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做,否则最好不要这么做。
 

本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ