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)
        }
    }
}