Vue父子组件值的传递【极简版】

超、凢脫俗 2024-03-27 00:17 68阅读 0赞

#### 文章目录 ####

*  发现宝藏
 *  1. 父组件向子组件传值
 *  2. 子组件向父组件传值

## 发现宝藏 ##

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【[宝藏入口][Link 1]】。

## 1. 父组件向子组件传值 ##

在Vue.js中，父组件向子组件传递值通常通过props（属性）来实现。以下是一种典型的方法：

在父组件中，可以使用子组件的标签，并通过props属性将数据传递给子组件。子组件可以通过props接收并使用这些数据。下面是一个简单的示例：

父组件模板：

<template>
      <div>
        <child-component :message="messageFromParent"></child-component>
      </div>
    </template>
    
    <script>
    import ChildComponent from './ChildComponent.vue';
    
    export default {
        
      components: {
        
        ChildComponent,
      },
      data() {
        
        return {
        
          messageFromParent: 'Hello from Parent!',
        };
      },
    };
    </script>

子组件模板：

<template>
      <div>
        <p>{
        {
         message }}</p>
      </div>
    </template>
    
    <script>
    export default {
        
      props: {
        
        message: String,
      },
    };
    </script>

在上面的示例中，父组件通过在子组件标签中使用 :message 来传递数据给子组件。子组件中使用 props 来声明要接收的属性，并可以在模板中使用它们。在这个示例中，子组件接收名为 message 的属性，它的类型是字符串，然后在模板中显示这个消息。

你可以根据具体需求传递不同的数据类型和多个props，根据需要在子组件中使用它们。这是一种父组件向子组件传递数据的基本方法。

## 2. 子组件向父组件传值 ##

在Vue.js中，当你将一个 prop 传递给子组件时，子组件默认不应该修改这个 prop，因为它应该是一个来自父组件的单向数据流。这意味着子组件不能直接更改父组件中传递的 prop 的值。

如果子组件需要改变某个值，并且希望这个改变反映到父组件中，你可以使用自定义事件来通知父组件做出相应的改变。这是前面提到的使用 this.$emit 的方法。你可以触发一个自定义事件，在父组件中监听并更新数据。

在Vue.js中，子组件向父组件传递值需要使用自定义事件。下面是一种常见的方法：

在子组件中，可以使用 $emit 方法触发一个自定义事件，并传递需要传递的数据。然后在父组件中通过在子组件上监听这个事件来获取数据。下面是一个简单的示例：

父组件模板：

<template>
      <div>
        <child-component @custom-event="handleEvent"></child-component>
        <p>Received data: {
        {
         receivedData }}</p>
      </div>
    </template>
    
    <script>
    import ChildComponent from './ChildComponent.vue';
    
    export default {
        
      components: {
        
        ChildComponent,
      },
      data() {
        
        return {
        
          receivedData: null,
        };
      },
      methods: {
        
        handleEvent(data) {
        
          this.receivedData = data;
        },
      },
    };
    </script>

子组件模板：

<template>
      <div>
        <button @click="sendDataToParent">Send Data to Parent</button>
      </div>
    </template>
    
    <script>
    export default {
        
      methods: {
        
        sendDataToParent() {
        
          this.$emit('custom-event', 'Data sent from child component');
        },
      },
    };
    </script>

在上面的示例中，子组件通过 sendDataToParent 方法向父组件触发了名为 custom-event 的事件，并传递了数据。父组件监听到该事件后，会执行 handleEvent 方法来接收并处理数据。

这是一个基本的示例，实际应用中可以根据具体情况来进行调整和扩展。

[Link 1]: https://www.captainbed.cn/dl