Vue中父子组件相互传递数据

一、父组件向子组件传递

方法：使用props关键字
步骤：
在父组件中导入子组件，
在父组件中注册子组件，
在父组件中使用子组件，
在子组件中使用props接收自定义的名称

// 父组件
import Child from '../components/child'
--------------------------------------------
components: {
          child:Child
      },
------------------------------------------
// 使用时要用bind绑定一个名称，例：Data(自定义名称),message(需要传递的数据)
<child v-bind:Data="message"></child>

// 子组件
// Data（就是在父组件绑定的自定义名称，接收到之后在子组件中类似于
	data(){
		...
		Data: "传递过来的数据",
	}
）
props:['Data'],

二、子组件向父组件传递

方法：使用自定义事件
步骤：
在子组件中添加方法并给标签一个事件(点击，焦点等，触发事件的时候会自动调用方法)
在父组件中使用子组件自定义的事件

// 子组件
<input type="text" v-on:input="emitToParent"/>
------------------------------------------------
methods: {
        emitToParent: function () {
          this.$emit('child-event',this.Data)
        },

// 父组件
<child v-on:child-event="parentEvent"></child>
-----------------------------------------------
methods:{
        parentEvent: function (data) {
          this.message = data;
        }
      },

两者结合

parent.vue

<template>
    <div id="app">
      <h1>
        我是父组件
        <input type="text" v-model="message">
        <child v-bind:Data="message" v-on:child-event="parentEvent"></child>
      </h1>
    </div>
</template>

<script>
  import Child from '../components/child'
    export default {
        name: "parent",
      data(){
          return {
            message: "parent中的数据"
          }
      },
      components: {
          child:Child
      },
      methods:{
        parentEvent: function (data) {
          this.message = data;
        }
      },
    }
</script>

<style scoped>
#app h1{
  border: 2px solid red;
}
</style>

child.vue

<template>
    <div id="app">
      <h3>
        我是子组件
        <p>{{Data}}</p>
        <label>
          <input type="text" v-model="Data" v-on:input="emitToParent"/>
        </label>
      </h3>
    </div>
</template>

<script>
    export default {
        name: "child",
      props:['Data'],
      methods: {
        emitToParent: function () {
          this.$emit('child-event',this.Data)
        },
      }
    }
</script>

<style scoped>
#app h3{
  border: 1px solid red;
}
</style>

最终效果

修改父组件中的input框子组件会跟着同步

修改子组件中的input父组件也会跟着同步