1. 父组件向子组件传值

    使用props传值

    父组件中:   

 

 

    子组件中:

 

2. 子组件向父组件传值

    使用事件发送的方式,通过函数的参数传值

    子组件中:

 

    父组件中:

 

                      

     通过语法糖双向绑定传值,详见父子组件双向数据绑定 https://www.cnblogs.com/yan122/p/15620644.html

 

 

 3. 父组件调用子组件事件

    通过ref方式调用方法

    父组件:

 

 

                  

    子组件:

 

4. 子组件调用父组件方法

   父组件用事件传递,子组件用 this.$listeners.方法名 调用

 父组件: 

 

 

 子组件: 

   

  

  父组件用变量传递方法,子组件用名 调用(在运用中有不停调用的问题,还未解决)

父组件:

 

 

子组件: 获取变量      直接调用 

 

 

  用 this.$parent.方法名 直接调用父组件中方法

 

 

 

 

5. attrs和listeners穿透组件

    使用attrs和listeners分别监听父组件的方法和事件,传递给自己的子组件(一般使用在调用公共组件中,可以直接将数据传递给调用的组件)

    

 

 

 

 

5. vuex传值

    将数据存储在vuex中全项目取用

    vuex中:

    存储:

 

    获取:

 

posted on 2021-01-22 14:58  occc  阅读(303)  评论(0编辑  收藏  举报