vue父组件与子组件传值问题汇总

本文简要介绍Vue.js中父组件与子组件间的传值问题，包括父组件传值给子组件、子组件传值给父组件以及子组件更新父组件的传值等方面。同时涵盖了在使用props时的一些注意点，以及实现过程中使用的关键语法和方法。

1、父组件给子组件传值

```父组件代码：```
<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent :child-message="message"/>
  </div>
</template>
<script>

import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {ChildComponent},
  data() {
    return {
      message: 'Hello from parent component!'
    }
  }
}

```子组件代码：```
<template>
  <div>
    <h2>{{ childMessage }}</h2>
  </div>
</template>
<script>export default {
  name: 'ChildComponent',
  props: {
    childMessage: {
      type: String, 
      required: true
    }
  }
}

在子组件中，我们定义了一个prop名称为“childMessage”，则在模板中通过“childMessage”调用。\n\n注意：prop名称在子组件中必须为驼峰式写法，但在父组件中必须使用短横线连接。"

2、子组件给父组件传值

```父组件中：vue```
<template>
  <div>
    <ChildComponent @send-data="displayData"/>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

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

export default {
  components: {ChildComponent,},
  data() {
    return {
      data: null,
    };
  },
  methods: {
    displayData(data) {
      this.data = data;
    },
  },
};
</script>

```子组件中：vue```
<template>
  <button @click="sendData">Send Data</button>
</template>
<script>export default {
  methods: {
    sendData() {
      this.$emit('send-data', 'Hello, parent!');
    },
  },
};
</script>

这个例子中，子组件中有一个按钮，点击时会触发一个 sendData 方法，并通过 $emit 方法向父组件发送一个 send-data 事件，同时携带一条消息。父组件中监听 send-data 事件，并将消息打印到页面上。

3、子组件更新父组件的传值

```父组件：vue```
<template>
  <div><h2>父组件</h2>
    <p>子组件传递的消息: {{ message }}</p>
    <child-component :hello="message" @update-message="updateMessage">

    </child-component>
  </div>
</template>
<script>import ChildComponent from './ChildComponent.vue';

export default {
  components: {ChildComponent,},
  data() {
    return {
      message: '',
    };
  },
  methods: {
    updateMessage(value) {
      this.message = value;
    },
  },
};
</script>

```子组件：vue```
<template>
  <div><h3>子组件</h3>    
    <input type="text" v-model="inputValue"/>
    <button @click="emitUpdateMessage">更新父组件的消息</button>
  </div>
</template>
<script>export default {
  props: ['hello'],
  data() {
    return {
      inputValue: this.hello,
    };
  },
  methods: {
    emitUpdateMessage() {
      this.$emit('update-message', this.inputValue);
    },
  },
};
</script>

上述代码使用了子组件的 $emit 方法，可以将数据通过事件的方式向父组件传递。同时，父组件如果想要接收到子组件传递的消息，可以使用 @事件名 语法来监听子组件的事件，然后在对应的方法中进行处理。这样，子组件就通过 $emit 方法将数据传递给父组件，父组件通过监听子组件的事件，获得子组件的数据，然后进行处理。这种方式就实现了子组件向父组件传递数据更新的功能。
其中:hello="message"中的hello则对应于子组件中接收值的props: ['hello']中的hello。