欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-26 16:32:22
...

一、父子组件间传值

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>