vue 父传子 子传父实现方式

父传子:

主要步骤:

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

理解:

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

props:properties的简称

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

代码如下:

父组件:

 子组件:

子传父:

主要步骤:

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

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

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

理解:

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

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

代码如下:

父组件:

 子组件:

猜你喜欢

转载自blog.csdn.net/weixin_64735754/article/details/123365412
今日推荐