vue子传父

子传父

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

<template>
  <div class="son">
    <button @click="sendTOParent">向父组件传值</button>
  </div>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      value: "这是子组件的value",
    };
  },
  methods: {
    sendTOParent() {
      this.$emit("listenToChildEvent", this.value);
    },
  },
};
</script>
<style scoped>
</style>

在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

<template>
  <div class="parent">
    <son v-on:listenToChildEvent="showMsgfromChild"></son>
  </div>
</template>

<script>
import son from "./son"; //引入子组件
export default {
  props: [],
  data() {
    return {};
  },
  methods: {
    showMsgfromChild(sonValue) {
      console.log(sonValue);
    },
  },
  components: {
    son,
  },
};
</script>
<style scoped>
</style>