子传父

子传父: comA 子组件

<template>
  <div id="coma">
    <button @click="btns()">点我传值给父组件</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cont: 100
    };
  },
  methods: {
    btns() {
      // 触发事件  this.$emit('事件名',数据);
      this.$emit("cusEvent", this.cont);
    },
  }
};
</script>

<style lang='scss' scoped></style>

子传父:bigData 父组件

<template>
  <div id="bigData">
    <!-- 事件名='父元素的方法' -->
    <coma @cusEvent="fn2"></coma>
    <p>{{a}}</p>
  </div>
</template>
 
<script>
import coma from "../comA";
export default {
  components: {
    coma
  },
  data() {
    return {
      a: 11,
    };
  },
  methods: {
    fn2(val) {
      this.a = val;//a的值 是11 接收到子组件传过来的值 后变为 100
    }
  }
};
</script>

<style lang='scss' scoped></style>

posted @ 2019-07-24 02:39  193557749  阅读(150)  评论(0编辑  收藏  举报