vue 父子組件通信方法

一、父組件給子組件傳遞數據

父組件傳送data數據給子組件

<children :data="data">

子組件接收

export default {
  props: ['data']
}

二、子組件操作父組件的方法

父組件定義一個show的方法，並且傳達給子組件，命名爲@show

<children @show="show"></children>

show(){
  console.log('I am parent!');
}

子組件直接用$emit調用@show方法

this.$emit('show');

還可以傳參

show(params){
  console.log(params);
}

this.$emit('show',  'I am children!');

三、父組件操作子組件的方法

父組件

<template>
  <div>
    <h1>我是父組件</h1>
    <!-- 定義子組件名字 -->
    <child ref="child"></child>
  </div>
</template>
<script>
  import child from './child'

  export default {
    components: {child},
    methods: {
      parent() {
       // $.refs調用
        this.$.refs.child.childFn()
      }
    }
  }
</script>

子組件

<template>
  <div>
    <h2>我是子組件</h2>
  </div>
</template>
<script>
  import child from './child'

  export default {
    components: {child},
    methods: {
      // 子組件的方法
      childFn() {
        alert('父組件調用了我')
      }
    }
  }
</script>