首先看父传子

自定义一个子组件

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>

<script>
export default {
  //接收父组件传递的数据
  props: {
    inputName: String,
  },
}
</script>

<style>
</style>

定义一个父组件，并且在父组件里面引用子组件，挂载子组件，使用子组件

<template>
  <div>父组件:
    <input type="text"
           v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child v-bind:inputName="name"></child>
  </div>

</template>

<script>
import Child from './Child.vue'
export default {
  components: {
    Child,
  },
  data() {
    return {
      name: '',
    }
  },
}
</script>

<style>
</style>

测试结果：

可以看到父输入框输入，子组件成功接收到父组件传的值。ヾ(◍°∇°◍)ﾉﾞ

---

子传父

子组件

<template>
  <div>
    子组件:
    <input type="text"
           v-model="childValue">
    <!-- 定义一个子组件传值的方法 -->
    <input type="button"
           value="点击触发"
           @click="childClick">
  </div>
</template>
<script>
export default {
  data() {
    return {
      childValue: '我是子组件的数据',
    }
  },
  methods: {
    childClick() {
      // childByValue是在父组件on监听的方法
      // 第二个参数this.childValue是需要传的值
      this.$emit('childByValue', this.childValue)
    },
  },
}
</script>

父组件

<template>
  <div>
    父组件:
    <input type="text"
           v-model="name">
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <Child v-on:childByValue="childByValue"></Child>
  </div>
</template>
<script>
import Child from '@/components/Child.vue'
export default {
  components: {
    Child,
  },
  data() {
    return {
      name: '',
    }
  },
  methods: {
    childByValue(childValue) {
      // childValue就是子组件传过来的值
      this.name = childValue
    },
  },
}
</script>

结果如下：

子组件传值给父组件成功啦ヾ(◍°∇°◍)ﾉﾞ