vue 组件传值

最新推荐文章于 2022-05-06 09:16:56 发布

南玖i

最新推荐文章于 2022-05-06 09:16:56 发布

阅读量74

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_49789433/article/details/118767760

版权

vue

vue 专栏收录该内容

54 篇文章 1 订阅

订阅专栏

首先定义两个页面

son 子页面

<template>
  <div class="about">
  </div>
</template>
<script>
export default {
  name: 'Son',
  data() {
    return {
      message: '我是儿子组件内部的内容',
    };
  },
  mounted() {
    this.$emit('son', this.message);
  },
};
</script>

index父页面

<template>
  <div class="home">
    <About @son="get"></About>
    {{num}}
  </div>
</template>

<script>

import Son from '../components/Son.vue';

export default {
  name: 'Home',
  components: {
    About,
  },
  data() {
    return {
      num: '',
    };
  },
  methods: {
    get(value) {
      this.num = value;
    },
  },
};
</script>

解析过程