Vue2-子传父和父传子的基本用法

发布时间:2024年01月09日

在Vue 2中,可以使用props和$emit来实现子组件向父组件传值(子传父)和父组件向子组件传值(父传子)。

子传父(子组件向父组件传值)的基本用法如下:

  1. 在父组件中定义一个属性(prop)来接收子组件传递的值。
  2. 在子组件中通过$emit方法触发一个自定义事件,并将需要传递的值作为参数传递给该事件。
  3. 在父组件中监听子组件触发的自定义事件,并在事件处理函数中获取传递的值。

下面是一个示例:

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <p>子组件传递的值:{{ messageFromChild }}</p>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      this.messageFromChild = message;
    }
  }
};
</script>
<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
    <button @click="sendMessageToParent">向父组件传递消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      const message = 'Hello, parent!';
      this.$emit('child-event', message);
    }
  }
};
</script>

在上述示例中,子组件通过点击按钮触发sendMessageToParent方法,该方法通过$emit触发了名为child-event的自定义事件,并将消息作为参数传递给父组件。父组件通过监听child-event事件,在handleChildEvent方法中获取到子组件传递的值,并将其赋值给messageFromChild属性,从而实现了子传父。

父传子(父组件向子组件传值)的基本用法如下:

  1. 在父组件中使用子组件时,通过属性(prop)将需要传递的值传递给子组件。
  2. 在子组件中通过props选项接收父组件传递的值,并在模板中使用。

下面是一个示例:

<!-- 父组件 -->
<template>
  <div>
    <h2>父组件</h2>
    <child-component :message="messageFromParent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromParent: 'Hello, child!'
    };
  }
};
</script>
<!-- 子组件 -->
<template>
  <div>
    <h3>子组件</h3>
    <p>父组件传递的值:{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

在上述示例中,父组件通过:message="messageFromParent"messageFromParent的值传递给子组件的message属性。子组件通过props选项声明了message属性,并在模板中使用{{ message }}来显示父组件传递的值,从而实现了父传子。

文章来源:https://blog.csdn.net/LxyingINGing/article/details/135488810
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。