vue.js父子组件通过Prop传值

前言：本文主要记录父子组件之间通过prop进行数据传递的方法一，即将Prop中的值赋值给本地定义的属性，不涉及Prop的其他特性

1. 父组件向子组件传值

先写一个简单的子组件，内容如下

<template>
  <div>
    <span class="child">{{msg}}</span>
    <br>
  </div>
</template>

<script>
export default {
  name: 'child',
  props: ['msg'],

然后在父组件中引入子组件

import child from '../components/child';

export default {
  name: 'parent',
  components: {
    child,
  },

使用

<child msg="Hello World"></child>

也可以通过绑定data中定义的变量来实现动态修改

html

<child :msg="message"></child>

js

data() {
    return {
      message: 'hello world',
    };
  },

2. 子组件向父组件传值

如果直接在子组件中修改prop，Vue会发出警告，因为prop属于单向数据流，即父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，所以这里有两种常见的方法在子组件中修改prop传递的值。

• [1] 本地定义一个变量，并将prop作为初始值

data: function () {
  return {
    message: this.msg
  }

• [2] prop 以一种原始的值传入且需要进行转换，在computed中定义

computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

方法一：
先在子组件的data中定义一个变量并把prop作为初始值
js

data: function () {
  return {
    message: this.msg
  }

添加一个输入框并双向绑定data中的变量message和添加一个事件
html

<input v-model="message" id="inp" @keydown.enter="onChange" />

@keydown.enter为键盘的enter键点击触发事件

js

methods: {
    onChange() {
      this.$emit('childFn', this.message);
    },
  },

通过$emit向父组件发送一个事件，关于此方法详情请查看文档vue自定义事件

然后在父组件中添加监听子组件事件的方法
html

<child :msg="message" @childFn="parentFn"></child> //监听子组件触发的事件,然后调用parentFn方法

js

methods: {
    parentFn(payload) {
      this.message = payload;
    },