vue 父传子 子传父实现方式

vue 父传子 子传父实现方式父传子 主要步骤 首先在子组件 props 中创建一个属性 用以接收父组件传过来的值 然后父组件中引用子组件 并在子组件标签中添加子组件 props 中创建的属性 最后把需要传给子组件的值赋给该属性 理解 父亲传给儿子东西 儿子在那边用一个碗接 这个碗就是 props 因为传的东西不可能只是一个 所以是一个数组 父亲因为要传东西到儿子的碗里 所以要绑定儿子的碗 然后传值 props properties 的简称 prop 只可以从上一级组件传递到下一级组件 父子组件

父传子:

主要步骤:

  1. 首先在子组件props中创建一个属性,用以接收父组件传过来的值;
  2. 然后父组件中引用子组件,并在子组件标签中添加子组件props中创建的属性;
  3. 最后把需要传给子组件的值赋给该属性。

理解:

        父亲传给儿子东西,儿子在那边用一个碗接,这个碗就是props,因为传的东西不可能只是一个,所以是一个数组,父亲因为要传东西到儿子的碗里,所以要绑定儿子的碗,然后传值

props:properties的简称

prop 只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改都会失效并警告。

代码如下:

父组件:

vue 父传子 子传父实现方式

 子组件:

vue 父传子 子传父实现方式

 

子传父:

主要步骤:

        1.子组件创建并监听自定义事件,

        2.在事件函数里面执行emit函数,通过emit把想传的值传给父组件

        3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数,在函数的参数中接收子组件传递的参数。

理解:

儿子传给父亲,儿子通过emit去传值,父亲通过on去接收值

$emit( 传输的名字 ,想传的值)

代码如下:

父组件:

vue 父传子 子传父实现方式

 子组件:vue 父传子 子传父实现方式

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/218011.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 上午8:15
下一篇 2026年3月18日 上午8:15


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号