vue

vue父子组件间函数调用

父组件页面

<Child ref="myChild"></Child>

父组件

// 引入子组件
import Child from './Child'
export default {
  // 注册子组件
  components: {Child},
  created () {
    // 调用子组件中的childMethod，并且传递参数data，需要给子组件添加属性ref
    this.$refs.myChild.childMethod(data)
  },
  methods: {
      parentMethod (data) {
          console.log(data)
      }
  }
}

子组件

export default {
    methods: {
        childMethod (data) {
            console.log(data)
        },
        parentMethod (data) {
            // 子组件调用父组件函数
            // 在一些UI框架中使用无效，可以使用$emit、vuex等其他方法
            this.$parent.parentMethod(data)
        }
    }
}

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2020/06/23 13:00