父组件向子组件传值

这是父组件

<template>
    <div class="test">
      <son :value='title'></son>
    </div>
</template>

<script>

import son from './son.vue';

export default {
  props: {
    value: String,
  },
  components: {
    son,
  },
  data() {
    return {
      title: '我是父组件的传过来的值',
    };
  },
};
</script>

这是子组件

<template>
  <div class="son">
{{value}} +1 + {{value}}
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },

};
</script>

子组件向父组件传值

这是子组件

<template>
    <div>
        <button @click="sendTOParent">向父组件传值</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      data: '我是子组件的值',
    };
  },
  methods: {
    sendTOParent() {
      this.$emit('listenToChildEvent', this.data);
    },
  },

};
</script>

这是父组件

<template>
    <div>
        <father v-on:listenToChildEvent = 'showMsgfromChild'></father>
    </div>
</template>
<script>
import father from './father.vue';

export default {
  components: { father},
  data() {
    return {
    };
  },
  methods: {
    showMsgfromChild(data) {
      console.log(data);
    },
  },

};
</script>
本文作者:Author:     文章标题:vue之父子组件传值

本文地址:https://www.yiyunblog.cn/index.php/archives/392/     

版权说明:若无注明,本文皆为“逸云日志”原创,转载请保留文章出处。
Last modification:December 31st, 2020 at 09:35 am
如果觉得我的文章对你有用,请随意赞赏