父子组件间传值、传递事件

一、父子组件间传值

1、父组件向子组件传值

父组件

<template>
  <div class="father">
    <child fatherMsg="click me"></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  components: {
    child
  },
  data () {
    return {}
  }
}
</script>

子组件

<template>
  <div class="child">
    <button >{{fatherMsg}}</button>
  </div>
</template>
<script>
export default {
  props: ['fatherMsg'],
  data () {
    return {}
  }
}
</script>

在父组件中，创建一个自定义属性fatherMsg，将值赋值给fatherMsg。
在子组件中，使用props来接收fatherMsg传递来的值。

2、子组件向父组件传值

父组件

<template>
  <div class="father">
    <child @listenChildEvent="recvMsg"></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  components: {
    child
  },
  data () {
    return {}
  },
  methods: {
    recvMsg (msg) {
      console.log(msg)
    }
  }
}
</script>

子组件

<template>
  <div class="child">
    <button @click="sendMsgToFather">click me</button>
  </div>
</template>
<script>
export default {
  props: ['fatherMsg'],
  data () {
    return {}
  },
  methods: {
    sendMsgToFather () {
      this.$emit('listenChildEvent', 'this msg is from child')
    }
  }
}
</script>

在子组件里用this.$emit('listenChildEvent', 'msg')向父组件触发一个事件，父组件监听这个事件就行了。listenChildEvent是父组件中的监听方法， msg 是需要传递给父组件的信息。

二、父组件向子组件传递事件

1、使用props接收父组件的方法

父组件

<template>
  <div class="father">
    <child :fatherMsg="handle"></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  components: {
    child
  },
  data () {
    return {}
  },
  methods: {
    handle () {
      console.log('click me')
    }
  }
}
</script>

子组件

<template>
  <div class="child">
    <button @click="fatherMsg">click me</button>
  </div>
</template>
<script>
export default {
  props: ['fatherMsg'],
  data () {
    return {}
  }
}
</script>

在父组件中，创建一个自定义属性fatherMsg，使用属性绑定，将值事件绑定给fatherMsg。
在子组件中，使用props来接收fatherMsg传递来的事件，使用v-on来触发。

2、直接在子组件中通过this.$parent.event来调用父组件的方法

父组件

<template>
  <div class="father">
    <child></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  components: {
    child
  },
  data () {
    return {}
  },
  methods: {
    clickMe () {
      console.log('clicked')
    }
  }
}
</script>

子组件

<template>
  <div class="child">
    <button @click="handle">click me</button>
  </div>
</template>
<script>
export default {
  props: ['fatherMsg'],
  data () {
    return {}
  },
  methods: {
    handle () {
      this.$parent.clickMe()
    }
  }
}
</script>

3、在子组件里用$emit向父组件触发一个事件，父组件监听这个事件(同子组件向父组件传值)。

4、父组件把方法传入子组件中，在子组件里直接调用这个方法。

父组件

<template>
  <div class="father">
     <child :fatherMethod="clickMe"></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  components: {
    child
  },
  data () {
    return {}
  },
  methods: {
    clickMe () {
      console.log('clicked')
    }
  }
}
</script>

子组件

<template>
  <div class="child">
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
export default {
  props: {
    fatherMethod: {
      type: Function,
      default: null
    }
  },
  data () {
    return {}
  },
  methods: {
    childMethod () {
      if (this.fatherMethod) {
        this.fatherMethod()
      }
    }
  }
}
</script>