vue-Vue中的组件传值

Vue中的组件传值

  1. 父传子:props,在子组件中,使用props来接受父组件传递过来的值
  2. 子传父:$emit,子组件中this.$emit(函数名,传递参数)
  3. 父组件获取子组件的属性和方法:
    1. $children this.$refs.refName.(子组件属性,子组件方法)
    2. $refs this.$chldren[index].(子组件属性,子组件方法)
  4. 子组件获取父组件的属性和方法:$parent $root this.$parent.(父组件属性,父组件方法)
  5. $attrs$listeners获取父组件实例属性和方法(组件嵌套情况下使用)
  6. 跨组件之间传值:中央事件总线,新建一个Vue事件bus对象,然后通过bus.$emit触发事件,bus.$on监听触发的事件。这个方法同样适用于任何组件传值,是基于发布订阅模式,通信数据比较简单时,可以采用这种 方案,项目比较庞大,可以采用Vuex
  7. vuex方式传值 全局响应数据
  8. provideinject实现父组件向子孙孙组件传值。(层级不限)

子组件调用父组件方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。
第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法
https://www.cnblogs.com/jin-zhe/p/9523782.html
父组件调用子组件方法

​ vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用

原文地址:https://www.cnblogs.com/ycyc123/p/14315481.html